此方式非常适合单页面数据处理。与原始js/jq数据处理相比效率更高完整网页demo
流程 两步就好：
一、引入vue.js，官网或者自己下载下来都可以。
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
二、初始化vuejs，根据vue语法进行数据填充。
<body>
<div id="main">
<div class="partTop border">
<ul>
<li v-for="(banner,key) in albumBookList" v-if="key <= 2" @click="detail(banner.book_id)">
<img :src="banner.pic" />
</li>
</ul>
<div class="text">
<div class="t1">{{albumInfo.title}}</div>
<div class="t2">{{albumInfo.content}}</div>
</div>
</div>
<div class="partFoot">
<div class="title">推荐介绍</div>
<div class="article">
<p v-html="albumInfo.introduction">{{albumInfo.introduction}}</p>
</div>
</div>
</div>
</body>
...
...
...
<script type="text/javascript">
var main = new Vue({
el: '#main',
data: {
api_album_list = "http://****m.php"
user_id: Number,
list: [],
isEnd: false,
isLoading: false,
curPage: 1,
album_id: Number,
albumInfo: {},
albumBookList: {}
},
created() {
var that = this;
that.album_id = that.get_query_string('id');
that.getData();
that.utilAll();
//触底加载
$(window).scroll(function() {
var d_height = $(document).height();
var w_height = $(window).height();
var w_scrollTop = $(window).scrollTop();
if (d_height - w_height - w_scrollTop <= 5) {
that.get_data();
}
});
},
watch() {},
methods: {
//获取列表
getData() {
var that = this;
$.get(
api_album_list, {
'method': 'getAlbumlistInfo',
'album_id': that.album_id
},
function(data) {
console.log(data);
if (data.ret) {
that.albumInfo = data.data;
that.albumBookList = data.data.book_arr;
} else {
alert('书单信息获取失败');
}
},
'json'
)
},
detail: function(id) {
window.location.href = "detail.php?id=" + id + '&action=goto_box&navStyle=opaque';
},
//获取url参数
get_query_string(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg); //search,查询？后面的参数，并匹配正则
if (r != null) return decodeURI(r[2]);
return null;
},
//设置cookie
setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
},
//获取cookie
getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") c = c.substring(1);
if (c.indexOf(name) != -1) {
return c.substring(name.length, c.length);
}
}
return "";
},
//清除cookie
clearCookie(cname) {
this.setCookie(cname, "", -1);
},
}
})
</script>
