一个Vue.js的小练习

小练习

相关引用

  • bootstrap3.0用来做些样式
  • jquery-1.12.4.min.js不知道bootstrap用来做什么,我用它来异步请求数据
  • vue.min.js用来数据绑定

1.布局



<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>Titletitle>
    
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    
    
    
    <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">
        
        <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(
            $("
"
).append( $("").attr("src", value.url) .addClass('img-rounded') //设置单个属性.css('width', '100%') //设置多个属性 .css({ 'width': '100%', 'height': '200px' }) ).addClass("col-md-3") ); }) }

你可能感兴趣的:(前端练习)