注意:本地json文件必须放在static目录下面,读取或交互数据前,请先安装vue-resource。点击前往  -->vue-resource中文文档)

一、Vue读取本地JSON数据

  created() {
this.$http.get("/static/data.json").then(
response => {
this.data = response.data;
},
response => {
console.log(response);
}
);
},

二、Vue与后台数据交互

      this.$http.get("url").then(
response => {
this.data = response.data;
},
response => {
console.log("获取失败!");
}
);

  

Vue数据交互的更多相关文章

  1. 11.vue 数据交互

    vue new Vue({ el,选择器 string/obj 不能选择html/body data, methods, template string/obj //生命周期 -- 虚拟DOM 1.初 ...

  2. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  3. vue前后台数据交互vue-resource文档

    地址:https://segmentfault.com/a/1190000007087934 Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新. Vue通 ...

  4. vue中的数据监听以及数据交互

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

  5. 常用vue请求交互数据方式

    几种 vue的数据交互形式 var that=this get请求 that.$http.get("1.txt").then(function(result){ console.l ...

  6. Vue中独立组件之间数据交互

    独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...

  7. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  8. vue,一路走来(3)--数据交互vue-resource

    所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不 ...

  9. vue 前后端数据交互问题解决

    先在vue项目中配置好路由组件路由 然后写相应组件 2 后端 写接口赔路由 第三  解决跨域问题 处理数据交互 这样前端就拿到了数据

随机推荐

  1. 学习笔记《Java多线程编程实战指南》三

    3.1串行.并发与并行 1.串行:一件事做完接着做下一件事. 2.并发:几件事情交替进行,统筹资源. 3.并行:几件事情同时进行,齐头并进,各自运行直到结束. 多线程编程的实质就是将任务处理方式由串行 ...

  2. C++Primer第五版——习题答案目录

    目前正在刷<C++Primer>这本书,会在博客上记录课后习题答案,答案仅供参考. 因为水平有限,如有有误之处,希望大家不吝指教,谢谢! 目录地址 使用的系统为:win 10,编译器:VS ...

  3. listview--Java泛型应用之打造Android万能ViewHolder-超简洁写法

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010785585/article/details/52808656 转载请注明出处:http:// ...

  4. Visual studio 调试发布到IIS站点方式一

    在项目开发过程中,前端项目可能调用多个API接口,并且这些API接口是在同一个资源解决方案下的,一个资源解决方案下只能设置一个启动项目.那么问题来了,某个API业务需求变更或有BUG,解决后是需要调试 ...

  5. Webpack 学习总结

    1.Webpack的特性 webpack 模块打包机,分析你的项目结构,找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),将其打包为合适的格式以 ...

  6. Mock测试接口

    Mock使用场景: (1)创建所需的DB数据可能需要很长时间,如:调用别的接口,模拟很多数据,确保发布版本接口可用 (2)调用第三方API接口,测试很慢, (3)编写满足所有外部依赖的测试可能很复杂, ...

  7. How to setup Tensorflow inception-v3 model on Windows

    There is Inception-v3 model python implementation on GitHub at: https://github.com/tensorflow/models ...

  8. 记录Redis使用中遇到的两个问题(原子性及数据完整性)

    1.使用Redis作为分布式锁的原子性问题 原方案: ① SETNX $LOCK_BUSI_KEY $REQ_ID ② EXPIRE $LOCK_BUSI_KEY $LOCK_TIME 问题: 使用S ...

  9. C 语言 优先级

    最高1 优先级举例 -a

  10. eShopOnContainers 看微服务④:Catalog Service

    服务简介 Catalog service(目录服务)维护着所有产品信息,包括库存.价格.所以该微服务的核心业务为: 产品信息的维护 库存的更新 价格的维护 架构模式 先看代码结构(下图). 主要依赖: ...