本文是张益达同学学习VUE的过程中的点滴,来记录成长
  • Vuev-bind给标签属性赋值 src, href

    v-bind 是给属性渲染数据不能使用 {{name}} 标记, 请使用 v-bind:属性名称=”name”
    namejson数据键值对中的键名, 请配合下面JS代码片食用

    例:

    HTML:

 <div class="col-xs-24 col-sm-12 col-md-8 col-lg-6 " v-for="item in lists">
    <at-card >
       <h4 slot="title" >
           BY {{item.author.name}}
       </h4>
         <div slot="extra">
            <a> {{item.date}} </a>
        </div>
        <div slot="loading">加载中...</div>
        <div  style="height:66px;">
            <a v-bind:href='item.url' >{{item.title}}</a>
        </div>
    </at-card>
</div>

JavaScript:

mounted:function() {
   var self = this;
   $.ajax({
       type: "post ",
       url: "http://blog,extrastu.xin ",
       data: {
           count: "10 ",
           page: val
       },
       dataType: "jsonp ",
       headers: {
           'Content-Type': 'application/json'
       },
       success: function(data) {
           self.lists = data.posts;
       }
   });
}
  • vue at-ui 框架 at-switch 使用小解
<template>
    <at-switch v-model="switch1" @on-change="change"></at-switch>
</template>
<script>
    export default {
        data () {
            return {
                switch1: false
            }  
        },
        methods: {
            change (status) {
                console.log(status)
            }
        }
    }
</script>
  • vue at-ui 框架 分页 at-pagination 使用小解
<template>
    <at-pagination :total="total" @page-change="handleCurrentChange" @pagesize-change="changeTotal" show-total show-sizer show-quickjump></at-pagination>
</template>
<script>
    export default {
        data () {
            return {
                total: " ",
                page: 0,
                count: 10,
            }  
        },
        methods: {
            handleCurrentChange(val) {
                    // console.log(`当前页: ${val}`);
                    var self = this;
                    $.ajax({
                        type: "post ",
                        url: "http://blog.extrastu.xin",
                        data: {
                            count: "10 ",
                            page: val
                        },
                        dataType: "jsonp ",
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        beforeSend: function() {
                             self.$Loading.start();
                        },
                        success: function(data) {
                            self.$Loading.finish()
                            self.lists = data.posts;
                            self.total = data.count_total;
                        },error:function () {
                             this.$Loading.error();
                        }
                    });
                },
                changeTotal(val) {
                    var self = this;
                    $.ajax({
                        type: "post ",
                        url: "http://blog.extrastu.xin ",
                        data: {
                            count: val,
                            page: 0
                        },
                        dataType: "jsonp ",
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        beforeSend: function() {
                             self.$Loading.start();
                           
                        },
                        success: function(data) {;
                            self.$Loading.finish()
                            self.lists = data.posts;
                            self.total = data.count_total;
                        },error:function () {
                             this.$Loading.error();
                             
                        }
                    });
                }


            },
        }
    }
</script>

扫描二维码,在手机上阅读!