标签:his json code 安装 main ted 浏览器 图片 data
Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为,比如使用inteceptor在ajax请求时显示loading界面。
vue-resource特点
vue-resource插件具有以下特点:
vue-resource使用
这里我们继续之前的例子做简单的描述。
1.安装vue-resource插件 cnpm install vue-resource --save-dve
2.在main.js中引入vue-resource import VueResource from ‘vue-resource‘ 然后在下面使用一下:Vue.use(VueResource)
3.在Home.vue中把我们定义的 users[...] 数组中数据注释掉。接下来我们使用网络的接口----http://jsonplaceholder.typicode.com 这里面有许多接口提供我们请求。
生命周期中有个created函数,在页面没有加载完成之前,创建的组件完成的钩子函数。这里需要在页面加载之前拿到数据。所以使用
created(){
this.$http.get("http://jsonplaceholder.typicode.com/users")
.then((data)) => {
this.users = data.body;
}
}
然后在User.vue文件中调用下就可以了。
<li v-for="user in users">
<h2>{{user.name}}</h2>
<h3>{{user.message}}</h3>
</li>
标签:his json code 安装 main ted 浏览器 图片 data
原文地址:https://www.cnblogs.com/gshao/p/9413262.html