vue學習

vue循環：

var vm = new Vue({
    el:'#box',
    data: {
        a: ''
    }

});
或者用mount掛載=>
var vm = new Vue({
    data: {
        a: ''
    }
}),$mount('#box');

v-for="item in data"

會有重複數據， track-by = “索引”，提高循環的性能

track-by = "$index"

vue過濾器：

debounce  延遲，配合事件

@keyup="show | debounce 2000"

表示鍵盤彈起事件發生2秒後，執行show函數

limitBy 限制循環的過濾器

limitBy   限制幾個   從第幾個開始

filterBy 過濾數據

filterBy 'o'

選取帶字幕o的數據

orderBy 1/-1 排序，按正序/倒敘排

自定義過濾器

Vue.filter(name,function(){

});

<div id="#box">
    {{a | toDou a b}}
</box>
Vue.fleter('toDou',function(input,a,b){
     return input<10 ? '0'+input : ''+input;
});

自定義指令
擴展了html的語法

Vue.directive(name,function(){

});

Vue.directive('red',function(){
    this.el.style.background = 'yellow';
});

<div v-red>這一行會變成黃色</div>

自定義拖拽標籤 drag

Vue.directive('drag',function(){
     var oDiv  = this.el;
     oDiv.onmousedown = function(ev){
         var l = ev.clientX - oDiv.offsetLeft;
         var t = ev.clientY - oDiv.offsetTop;
         document.onmousemove = function(ev){
             var posX = ev.clientX - l;
             var posY = ev.clientY - t;
             oDiv.style.left = posX + 'px';
             oDiv.style.top = posY + 'px';
         } 
         document.onmouseup = function(){
             document.onmousemove = null;
             document.onmouseup = null;
         }
     };
 });

自定義元素指令（用處不大）

Vue.elementDirective('zns-red',{
    bind:function(){
        this.el.style.background = 'red';       
    }
});

自定義鍵盤信息：

console.log(ev.keyCode)；查看所按鍵盤鍵碼；

Vue.directive('on').keyCodes.ctrl = 17;

監聽數據變化：

之前有 vm.$el/$mount/$options

vm.$watch(name,fnCb) fnCb 回調函數