注意:本地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. Kong(V1.0.2) Securing the Admin API

    Introduction Kong的Admin API为Services, Routes, Plugins, Consumers, and Credentials的管理和配置提供了一个RESTful接 ...

  2. canvas一些属性

    lineTo(x,y) 定义线条结束坐标 moveTo(x,y) 定义线条开始坐标 ctx.stroke();绘制空心图形 ctx.fill();填充图形 把当前路径环绕起来的区域进行填充 ctx.f ...

  3. mvc中让路由忽略带后缀的路径文件

    public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/ ...

  4. 发现一个非常有趣好用的git博主,收录热门OC、swift项目三方架构

    日常学习: https://github.com/iOShuyang/Book-Recommend-Github

  5. ArcGIS紧凑型缓存存储格式分析

    by 蔡建良 2018-8-24 网络中我看到的网文将bundle存储切片数据的方式都没说清或是说错.按照错误方法一样可以在桌面浏览,但在arcgis for android却无法浏览. bundlx ...

  6. Windows和MacOS的比较——不断完善和补充,欢迎吐槽

    1. 鼠标滚轮的方向不一样,Windows上滚轮朝下,页面滚动条也会朝下.而Mac上则相反. 2. Windows上有Home和End键,经常可以Ctrl+Home,Ctrl+End,Ctrl+Shi ...

  7. 学习oracle存储过程

    --创建存储过程create or replace procedure BCPS.getApplyDate(applyno varchar2)as a_date date;begin select a ...

  8. Chapter07 链表(下):如何轻松学出正确的链表代码?

    技巧一:理解指针或引用的含义 技巧二:指针丢失和内存泄漏 技巧三:利用哨兵简化实现难度 技巧四:重点留意边界条件处理 如果链表未空时,代码是否能够正常运行 如果链表只包含一个节点时,代码能否正常运行 ...

  9. 使用Git将本地文件提交到远程仓库

    一 操作准备条件: git远程仓库已经建好了,本地文件已经存在了,现在要将本地代码推到git远程仓库保存. 解决办法如下: 1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以 ...

  10. 当map遇到parseInt

    也是一道面试题,估计除了面试题,一般情况下,也不会写出类似的代码了. ['1', '2', '3'].map(parseInt) 这么一道题的返回结果是什么? 如果不用浏览器去验证,乍一看,似乎确实没 ...