版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/baidu_32377671/article/details/80836521
小练习
相关引用
- 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="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script href="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script href="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="page" class="container">
<div class="row">
<!-- 使用VueJs 绑定数据 -->
<div class="col-md-3 thumbnail" v-for="(value,index) in values">
<a @click="onClick(index,value)">
<img :src="value.url" class="img-rounded"
style="width: 100%;height: 200px">
<div v-text="value.desc" class="pull-right"></div>
</a>
</div>
</div>
<!-- 用来加载更多的按钮 -->
<button class="btn btn-default center-block" type="submit"
v-if="showBtn" @click="loadMore" v-text="label"></button>
</div>
</body>
<script src="../js/mine/index.js"></script>
</html>
| 属性 | 简写 | 作用 | 命名空间 | 举例 |
|---|---|---|---|---|
| v-bind | : | 绑定属性 | xmlns:v-bind=“http://www.w3.org/1999/xhtml” | v-bind:src → :src |
| v-on | @ | 绑定事件 | xmlns:v-on=“http://www.w3.org/1999/xhtml” | v-on:click → @click |
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")
);
})
}