一個Vue.js的小練習
阿新 • • 發佈：2019-01-07
小練習
相關引用
- bootstrap3.0用來做些樣式
- jquery-1.12.4.min.js不知道bootstrap用來做什麼，我用它來非同步請求資料
- vue.min.js用來資料繫結
1.佈局
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="zh-CN"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset= | 屬性 | 簡寫 | 作用 | 名稱空間 | 舉例 |
|---|
2.實現具體功能
在index.js檔案中對資料進行繫結，並實現功能性程式碼程式碼如下：
var page = 1;//頁數
var div = new Vue({
el: '#page',
data: {
values: [],
label: '載入更多',
showBtn: false
},
methods: {
onClick: function (index, value) {
//開啟新的視窗
window.open(value.url,'_blank');
}, loadMore: function () {
page++;
loadPic();//載入更多
}
}
});
loadPic();//載入資料
/**
* 載入圖片
*/
function loadPic() {
$.get({
url: 'http://gank.io/api/data/%E7%A6%8F%E5%88%A9/8/' + page,
success: function (data) {
var infoArg = data.results;
console.log(infoArg.length + '條資料');
console.log('當前頁是' + page);
$(infoArg).each(function (index, item) {
div.values.push(item);
});
if (infoArg.length > 0) {
div.showBtn = true;
}
}
});
}
練習的效果
看樣子，在chrome中的效果還算可以。
附一個Jquery遍歷插入元素的方式，不記錄一下以後還得找- -！
//接收的資料同樣是gank.io的福利圖片
function useJquery(list) {
var gridGroup = $('#page');
$(list).each(function (index, value) {
gridGroup.append(
$("<div></div>").append(
$("<img/>").attr("src", value.url)
.addClass('img-rounded')
//設定單個屬性.css('width', '100%')
//設定多個屬性
.css({
'width': '100%',
'height': '200px'
})
).addClass("col-md-3")
);
})
}