您的位置：首页 > 产品设计 > UI/UE

vue.js的使用

2016-08-23 15:10 411 查看

一参考资料

二例子1

三例子2

一、参考资料

https://segmentfault.com/q/1010000004296954

官网：http://cn.vuejs.org/examples/commits.html

官网：http://cn.vuejs.org/guide/index.html

慕课网：http://www.imooc.com/article/2688

二、例子1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="zepto.js"></script>
<script src="vue.min.js"></script>
</head>

<body>
<div id="demo">
<ul>
<li v-for="company in companylist" id="{{company.id}}">
公司名称：{{company.name}}
<br />
公司地址: {{company.addr}}
<p></p>
</li>
</ul>
</div>
<script>
var demo = new Vue({
el: '#demo',
data: {
companylist: null,
},
/*
watch: {
currentBranch: 'fetchData'
},*/
created: function () {
this.fetchData();
},
methods: {
fetchData: function () {
var self = this; //注意这个self！不能放进下面的post里
var url = "http://yjt.nnch.net/index.php/api/company/company_list";
$.post(url,
{region: '广东省'},
function (data) { //注意zepto返回的data已经是json对象，可以直接data.xx访问
self.companylist = data.company_list;
console.log(self.companylist[0].addr);
});
}
}
})
</script>
</body>
</html>

三、例子2

结合分页。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="zepto.js"></script>
<script src="vue.min.js"></script>
</head>

<body>
<div id="demo">
<ul>
<li v-for="goods in goodslist " id="{{goods.id}}">
公司名称：{{goods.name}}
<br />
公司地址: {{goods.addr}}
<p></p>
</li>
</ul>
</div>

<script>
var vm = new Vue({
el: '#demo',
data: {
goodslist : null,
},
created: function () { },
methods: {}
});
mui.ajax(url,{
data:data,
dataType:'json',
type:'POST',
timeout:10000,
success:function(data){<
4000
/span>
for (var i in data.goods_list) {
var arr = new Array();
for (var item in data.goods_list[i]) {
arr[item] = data.goods_list[i][item];
}
/*正常填充渲染用下句*/
vm.goodslist = data.goods_list;
/*深拷贝即追加填充用下面这句*/
vm.goodslist.push(arr);
}
},
error: function(xhr, type, errerThrown) {
mui.toast('网络异常,请稍候再试');
}
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue-js 渲染

相关文章推荐

新的分享

章节导航