类库地址：
https://github.com/pagekit/vue-resource
1、打开类库地址里的使用说明，找到示例代码
adde255953735acc2cd95d1eda479ab2.png
说明：老师的视频接口用postman正常，但是用vue扩展类库的ajax请求过来后部分出错，跨域问题
最后是php版本的问题
（1）list.html代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for列表渲染</title>
<link rel="stylesheet" href="aui/aui.css">
</head>
<body>
<div class="aui-content aui-margin-b-15" id="app">
<ul class="aui-list aui-media-list">
<li>
图文列表
</li>
<li>
<div>
<div>
<img src="001.png">
</div>
<div>
<div>
<div>带有媒体的列表二</div>
<div>08:00</div>
</div>
<div>
在下方我们加入了aui-info信息条
</div>
</div>
</div>
<div style="padding-top:0">
<div>
<img src="001.png" style="width:1rem"><span>流浪男</span>
</div>
<div>2015-07-14 10:31</div>
</div>
</li>
</ul>
</div>
</body>
</html>
<script src="vue.js"></script>
<script src="vue-resource.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
list:[],
index_url:'http://news.88xuexi.cn/app/index'
},
methods:{
init:function () {
this.$http.get(this.index_url,{
id:2,
username:''
}).then(function(response){
console.log('正确响应');
// get body data
// this.someData = response.body;
}, function(response){
console.log('响应失败'); // error callback
});
}
},
})
</script>
（2）效果
3b78f7698917faffdc1939a49a6212b5.png
2、完成的
（1）list.html 代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for列表渲染</title>
<link rel="stylesheet" href="aui/aui.css">
</head>
<body>
<div class="aui-content aui-margin-b-15" id="app">
<ul class="aui-list aui-media-list">
<li class="aui-list-header">
图文列表
</li>
<li class="aui-list-item" v-for="vo in list">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img :src="vo.img">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表二</div>
<div class="aui-list-item-right">08:00</div>
</div>
<div class="aui-list-item-text">
{{ vo.title }}
</div>
</div>
</div>
<div class="aui-info" style="padding-top:0">
<div class="aui-info-item">
<!--<img src="liulangnan.png" style="width:1rem" class="aui-img-round">-->
<span class="aui-margin-l-5">{{ vo.author }}</span>
</div>
<div class="aui-info-item">{{vo.create_time}}</div>
</div>
</li>
</ul>
</div>
</body>
</html>
<script src="vue.js"></script>
<script src="vue-resource.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
list: [],
index_url:'http://news.88xuexi.cn/app/index'
},
methods:{
init:function () {
//传统写法
this.$http.post(this.index_url,{
id:2,
username:''
}).then(function(response){
console.log('正确响应');
var ret = JSON.parse(response.data); //固定写法
vm.list = ret.data.article; //实现了ajax获取到数据绑定到vm对象
}, function(response){
console.log('响应失败'); // error callback
});
}
},
});
setTimeout(function () {
vm.init();
},500)
</script>
19b951c2f9911e02c5b6e024abbcacab.png
（2）postman的请求数据：
4cf68b41fa75d07b0c7ab6599d677c57.png
重点单独说明
（3）js请求代码：
1508bfd770ee1f404041eede31809ab8.png
（4）模板渲染：
77f8bd716a02a93a205190180a54bd1e.png
网友评论