一、解決網速慢的時候用戶看到花括號標記

　　（1）v-cloak，防止閃爍，通常用於比較大的選擇器上。

　　給元素添加屬性v-cloak，然後style裏面：[v-cloak]{display:none;}

　　（2）{{msg}}，等價於<span v-text="msg"></span>

　　（3）{{{msg}}}，html轉意輸出，等價於<span v-html="msg"></span>（在v2.0上，三括號已經刪除）

二、計算屬性的使用：

　　（1）註意：計算屬性computed的寫法方式是跟methods是一樣的，但是computed是屬性，可以直接拿來當屬性使用，而methods是方法

　　（2）計算屬性的值取決於函數的返回值，這樣函數裏面就可以寫相應的業務邏輯

　　（3）2種方式：

//1、默認get方式
new Vue({
    el:‘#box‘,
    data:{
        a:1
    },
    computed:{
        b:function(){
            //業務代碼邏輯
            return this.a + 1; //計算屬性b的值取決於return的值
        }
    }
});
//2、完整寫法：有get和set
computed:{
    b:{
        get:function(){
            
 
return this.a + 1; 
        },
        set:function(val){//val即為給計算屬性b賦的值
            this.a=val;
        }
    }
}

三、vue實例自帶的簡單方法

　　vm.$el 就是指定的el元素
　　vm.$data 就是data對象
　　vm.$mount(el)手動掛載元素
　　vm.$options 獲取自定義屬性或方法（vm.$options.aa，vm.$options.show()）
　　vm.$destroy 銷毀對象
　　vm.$log() 查看現在數據的狀態

四、循環

　　（1）循環有重復的數據怎麽辦？加track-by="索引或uuid"，還會提高循環的性能

<li v-for="value in arr" track-by="$index">{{value}}</li>

五、過濾器

　　1、跟json串使用：json，類似於JSON.stringify，如果屬性是json對象的時候，用於將json對象序列化顯示

　　2、跟事件配合使用：debounce 2000，延遲執行

　　3、跟數組配合適用的過濾器：

　　　　limitBy 2 1，限制取幾個數據，有兩個參數：limitBy 取幾個 從哪開始（索引）

　　　　filterBy ‘a‘，按字符過濾包含給定字符的數據

　　　　orderBy 1（正序，-1倒序），排序用

　　4、自定義過濾器：常規的model—過濾—view

　　語法：Vue.filter(name,function(arguments){})

<div id="box">{{a | toDou 1 2}}</div>

Vue.filter(‘toDou‘,function(input,a,b){
    alert(a+‘,‘+b);//input即傳a值，a/b依次為1、2
    return input<10?‘0‘+input:‘‘+input;
});

　　5、雙向過濾器：完整的寫法，默認的寫法就是一般默認是read

    　　//<h2>welcome</h2>
        Vue.filter(‘filterHtml‘,{
            read:function(input){ //model-view
                alert(1);
                return input.replace(/<[^<]+>/g,‘‘);
            },
            write:function(val){ //view -> model
                console.log(val);
                return val;
            }
        });

六、自定義屬性指令

　　Vue.directive(指令名稱,function(接收參數){ this.el — 原生的dom對象})

　　<div v-red="參數"></div>，傳參數

　　指令名稱：v-red，那麽對應的是red；指令必須以 v- 開頭，否則不生效

//拖拽指令自定義
Vue.directive(‘drag‘,function(){
    var oDiv=this.el;
    oDiv.onmousedown=function(ev){
        var disX=ev.clientX-oDiv.offsetLeft;
        var disY=ev.clientY-oDiv.offsetTop;

        document.onmousemove=function(ev){
            var l=ev.clientX-disX;
            var t=ev.clientY-disY;
            oDiv.style.left=l+‘px‘;
            oDiv.style.top=t+‘px‘;
        };
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
});

//帶參數指令
Vue.directive(‘red‘,function(color){
    this.el.style.background=color;//color接收參數red
});

<span v-red="‘red‘">{{msg}}</span>

　　自定義元素指令：語法不一樣

//自定義元素指令，用處不大
Vue.elementDirective(‘zns-red‘,{
    bind:function(){
        this.el.style.background=‘red‘;
    }
});

<div id="box">
    <zns-red></zns-red>
</div>

七、自定義鍵盤信息

　　Vue.directive("on").keyCodes.ctrl=17

　　那麽就可以這麽使用了：@keydown.ctrl="show"，按ctrl鍵觸發

八、監聽數據變化

　　vm.$watch(name,function(){})，淺度監視，適用於name為基礎類型

　　vm.$watch(name,function(){},{deep:true})，深度監視，適用於name為基礎類型和引用類型

Vue基礎知識總結（二）