安装
本地环境安装路由插件vue-resource： cnpm install vue-resource --save-dev
*没有安装淘宝镜像的可以将 cnpm 替换成 npm
想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024.html，（打开搜索 镜像 即可跳转到对应位置）
配置
1.引用
main.js中用import引入进来：
|
1
|
import
VueResource from
'vue-resource'
|
* 注意这里VueResource是自定义的名字。下边注册的时候会用到
2.注册
同样，main.js中注册，同vue-router
|
1
|
Vue.use(VueResource)
|
3.配置
直接在对应页面的created钩子函数配置即可：
|
1
2
3
4
5
6
|
created() {
this
.$http.get(
"http://jsonplaceholder.typicode.com/todos"
)
.then((data) => {
// console.log(data)
this
.arrs = data.body;
})
|
链接是数据接口的地址，arrs是在本页面的data函数中定义的空对象，data.body是拿到的数据存放的地方。
4. 使用数据
根据拿到的数据结构和内容对应渲染
页面中直接渲染使用：
|
1
2
3
4
5
6
|
<li v-
for
=
"item in arrs"
v-on:click=
"item.completed = ! item.completed"
>
<!-- {{item}} -->
<span
class
=
"id"
>{{item.userId}} </span>
<span
class
=
"title"
>{{item.title}}</span>
<span
class
=
"completed"
v-show=
"item.completed"
>选中</span>
</li>
|
用到vue-resource的页面代码参考：
View Code
声明：
请尊重博客园原创精神，转载或使用图片请注明：
博主：xing.org1^
出处：http://www.cnblogs.com/padding1015/