此方式非常適合單頁面數(shù)據(jù)處理啦膜。與原始js/jq數(shù)據(jù)處理相比效率更高完整網(wǎng)頁demo
流程 兩步就好：
一有送、引入vue.js，官網(wǎng)或者自己下載下來都可以僧家。
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
二雀摘、初始化vuejs，根據(jù)vue語法進(jìn)行數(shù)據(jù)填充八拱。
<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參數(shù)
get_query_string(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg); //search,查詢阵赠？后面的參數(shù)，并匹配正則
if (r != null) return decodeURI(r[2]);
return null;
},
//設(shè)置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>
