二、vueJs基礎知識02

vue生命週期:
　　鉤子函數:

　　created -> 實例已經建立 √
　　beforeCompile -> 編譯以前
　　compiled -> 編譯以後
　　ready -> 插入到文檔中（至關於window.onload，頁面初始化寫在此處） √

　　beforeDestroy -> 銷燬以前
　　destroyed -> 銷燬以後

防止雙大括號閃爍

　　v-cloak  適用於大段落

　　v-text   適用於小段文字

　　v-html

計算屬性

　　angular中使用$scope.$watch進行監聽變化

　　vue中計算屬性的使用：

   computed:{
        b:function(){    //默認調用get
            return 值（依賴於data中的數據）
        }
    }
    --------------------------
    完整用法（get和set方法）
    computed:{
        b:{
            get:function(){},
            set:function(){}
        }
    }

    * computed裏面能夠放置一些業務邏輯代碼，必定記得return

vue實例簡單方法:
　　vm.$el -> 就是綁定實例的元素
　　vm.$data -> 就是實例的data數據
　　vm.$mount -> 手動掛載vue實例到元素上（同el配置項）

　　vm.$options -> 獲取自定義屬性
　　vm.$destroy -> 銷燬對象

　　vm.$log(); -> 查看如今數據的狀態

循環重複問題
　　v-for="value in data"

　　會有重複數據？
　　track-by='索引' 提升循環性能

　　track-by='$index/uid'

過濾器

　　vue提供過濾器:
        capitalize    uppercase    currency....

        debounce    配合事件，延遲執行（加上延遲時間參數）
    數據（數組）配合使用過濾器:
        limitBy    限制幾個（後面加參數）
        limitBy 參數(取幾個)
        limitBy 取幾個  從哪開始（兩個參數）

        filterBy   過濾數據（後面的參數是包含的過濾條件，相似模糊查詢）
        filterBy ‘誰’

        orderBy    排序（按首字母排序）
        orderBy 誰 1/-1 ）（兩個參數，按誰排，正倒序）
            1  -> 正序
            -1  -> 倒序

    自定義過濾器:  model ->過濾 -> view
        Vue類上有方法filter
        Vue.filter(name,function(input){
            //input是要處理的內容，後面也能夠有傳參數
        });

    時間轉化器
    過濾html標記

    雙向過濾器:*
    Vue.filter('filterHtml',{
                read:function(input){ // model->view
                    return input.replace(/<\/?.+?\/?>/g,'');
                },
                write:function(val){ //view -> model
                    return val;
                }
    });

    數據 -> 視圖
    model -> view

    view -> model

自定義屬性指令

　　指令: 擴展html的功能語法 （能夠作dom操做，拖拽也只能在指令裏面實現）v-text ， v-for， v-html

　　定義方法：

　　　　Vue.directive(指令名稱,function(參數){
　　　　　　this.el -> 原生DOM元素，vue實例的el
　　　　});

　　使用（可傳參數）：

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

　　　　指令名稱: v-red -> red(v-去掉，使用的時候必須以v-開頭)

　　　　* 注意: 必須以 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; }; }; });
　　　　　//使用
　　　　　<div v-drag></div>

　　自定義元素指令:（用處不大） 後面有組件代替
　　　　Vue.elementDirective('zns-red',{
　　　　　　bind:function(){
　　　　　　　　this.el.style.background='red';
　　　　　　}
　　　　});

　　　　使用：

　　　　<zns-red></zns-red>

自定義鍵盤信息　　　　

　　vue提供的：

　　　　@keydown.up
　　　　@keydown.enter

　　自定義例如@keydown.a/b/c....    用on綁定

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

監聽數據變化

　　vm.$el/$mount/$options/....

　　vm.$watch(name,fnCb); //淺度 name是數據的名字，fnCb是回調函數 　　vm.$watch(name,fnCb,{deep:true}); //深度監視 引用類型的數據