注意:本地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. python 代理的使用

    这里分享一个测试ip的网址     http://ip.filefab.com/index.php scrapy 随机请求头和代理ip的使用原理 import random # 添加一个中间键 cla ...

  2. vue2.9.5 引入vue-strap时报错

    1.vue2.9.5 引入vue-strap时出错 2.组件中引入vue-strap的具体代码如下: 1 import DatePicker from 'vue-strap/src/Datepicke ...

  3. java核心-多线程-线程类-Callable、Future和FutureTask

    基本概念 <1>Callable,Callable和Runnable差不多,两者都是为那些其实例可能被另一个线程执行的类而设计的,最主要的差别在于Runnable不会 返回线程运算结果,C ...

  4. html网页中如何给文字加入下划线

    网页中一些重要的文字或者特殊性高的文字,例如:链接,标注等我们需要加上下划线,那么这里我们就需要使用到<U>标签了,写法如下 字体下划线: <u>这里添加内容</u> ...

  5. vue分页效果

    js部分 <script src="....js/vue.js"></script> <script src="..../js/vue-re ...

  6. Python多线程实例

    前言 感觉理解python多线程用“切换”和“共享”就差不多了.这里就贴上一个抢车票的小小实例,还有自己在编程过程中遇到的坑..... 实例:抢车票 抢车票有三类人:会员.弄了加速包.普通人. 说说区 ...

  7. springboot学习四:整合mybatis

    在application.properties加入配置 ## Mybatis 配置 mybatis.typeAliasesPackage=org.spring.springboot.domain my ...

  8. Oracle 生成Guid;Oracle 生成多个Guid;Oracle 生成带''-"的Guid

    Oracle 生成Guid select sys_guid() from dual Oracle 生成多个Guid Oracle 生成带''-"的Guid , ) , ) || '-' || ...

  9. Security注解:@PreAuthorize,@PostAuthorize, @Secured, EL实现方法安全

     说明 (1)JDK版本:1.8(2)Spring Boot 2.0.6(3)Spring Security 5.0.9(4)Spring Data JPA 2.0.11.RELEASE(5)hibe ...

  10. ASP.NET MVC 3 Application Upgrader

    ASP.NET MVC 3 Application Upgrader: http://aspnet.codeplex.com/releases/view/59008