Vue.js使用总结

嵌套循环

1. 方法一

<div v-for="item in data">
    <div v-for="part in item.parts">
    {{ part.name }}
    </div>
</div>

动态绑定

• 说明 v-bind可以简写为 : 例如,v-bind:class简写为:class

1. 动态拼接

v-bind:href=“‘somestr’ + item.id”

<a v-bind:href="'somestr' + item.id"></a>

2. 自定义绑定属性

v-bind:my-id=”item.id”

<div v-bind:my-id="item.id">

3. 属性计算

< > == != && || + - * / 都可以用

<div v-if="(new Date()).valueOf() < item.endDate && item.state != 1">

4. 添加VUE过滤器

“|”符号后面的是引入的过滤器,详见”过滤器”章节.

<span>{{item.myDate | filter_timestamp}}</span>

渲染

1. for循环的元素下标

(集合每一项 , 每一项下标) in 集合

<a v-for="(myitem,index) in list" v-bind:class="{'active':index == 0}">

注意 : 以上是给集合第一项加上css类active (* index == 0 也可以写成 !index)

method updated

1. method : 用于绑定方法

html:
<div>
    <div v-on:click="mclickone">绑定函数1</div>
    <div v-on:click="mclicktwo">绑定函数2</div>
</div>

js:
var vm = new Vue({
    el: ...,
    data: {
     ...
    },
    // 在 `methods` 对象中定义方法
    methods: {
        mclickone: function(event) {
            //当前元素.必须用一个变量接收,再做操作
            var currElement = event.target; 
        },
        mclicktwo: function(event) {
            //当前元素.必须用一个变量接收,再做操作
            var currElement = event.target; 
        }
    }
});

1. updated : dom渲染完毕时(生命周期)

var vm = new Vue({
    el: ...,
    data: {
        ...
    },
    methods: {
        ...
    },
    updated: function(){
       //初始化数字输入控件
       mui(".mui-numbox").numbox();
    }
});

渲染问题

网页加载时Dom结构显示未加载数据的vue代码的问题

描述:
错误显示 , 如 : {{foo.fooo.name}}

解决办法 : 为vue挂载的dom的style-background属性赋值即可 ! 例如 :

<div id="vue_element" style="backgroud: #cccccc">
    <foo-dom-start>
        {{vue_data.name}}
    </foo-dom-end>
</div>

<script>
    var vm = new Vue({
        el: "#vue_element",
        data: {
            vue_data: {}
        }
    })    
</script>

---

过滤器 filter_timestamp.js

在html文件中引用 , “|”符号后面使用.

/**
 * vue过滤器
 * 时间戳转日期(格式:2017-10-29)
 */
Vue.filter('filter_timestamp', function(value) {
    var date = new Date(value);
    Y = date.getFullYear(), m = date.getMonth() + 1, d = date.getDate(), H = date.getHours(), i = date.getMinutes(), s = date.getSeconds();
    if(m < 10) {
        m = '0' + m;
    }
    if(d < 10) {
        d = '0' + d;
    }
    if(H < 10) {
        H = '0' + H;
    }
    if(i < 10) {
        i = '0' + i;
    }
    if(s < 10) {
        s = '0' + s;
    }
    var t = Y + '-' + m + '-' + d;
    return t;
});