Vue學習筆記(3)-品牌管理系統

時間 2019-12-09

標籤 vue 學習筆記品牌管理系統简体版

原文原文鏈接

技術點

鉤子函數
自定義指令
自定義過濾器
計算屬性
監聽屬性

自定義指令

爲何須要自定義指令？vue

爲了代碼複用和靈活。

指令的分類：git

全局指令：github

在vm實例外面建立的指令；
經過Vue.directive來建立；

局部指令：之後補充數組

如何定義自定義指令?（不用賦值）緩存

Vue.directive(指令名稱, {inserted(el,binding){}})

如何使用自定義指令？（不用賦值）dom

v-指令名稱

如何定義帶值的指令？異步

Vue.directive(名稱, {inserted(el,binding){binding.value}})

如何使用須要賦值的指令？函數

v-指令名稱='值'

在vue中有一套完整的生命週期的鉤子函數this

mounted鉤子函數，它是一個獨立的結構，不要寫在methods屬性中spa
鉤子函數：在某個場景會自動觸發的函數

不建議使用原生dom的方式去獲取元素，由於vue就是但願可以將咱們從繁瑣的dom操做中解脫

vue中標記元素能夠經過ref （reference）

ref='標記值'
功能相似於以前的id設置
獲取值經過this.$refs

上面的實現方式雖然能夠，可是有一個重大的缺點：若是須要獲取焦點的元素髮生變化，那和以意味着模板代碼和mounted鉤子函數中的代碼也須要進行修改--不方便也不合理。我但願達到這樣的效果：我作出一個可以讓元素獲取焦點的功能(函數)，若是元素須要獲取焦點就進行調用，不然就當它不存在--這個玩意就是指令；

指令：能夠實現某種功能，用戶能夠選擇使用

什麼是全局自定義指令：在vue實例外建立的指令

如何建立全局自定義指令

Vue.directive(名稱，{inserted鉤子函數})

inserted鉤子函數：在添加指令的元素插入到父節點時觸發--說白了就是生成dom樹

Vue.directive('focus',{
    //el：就是當前添加了這個指令的元素，el能夠用於直接操做dom    
    inserted(el,binding,vNode){
        // 咱們須要獲取元素並設置聚焦
        console.log(el)
        el.focus()
    }
})

新的需求：咱們須要根據用戶的喜愛來修改文本顏色

經過指令來實現

經過Vue.directive(名稱,{inserted(el,binding){}})

使用指令的時候：v-名稱='值'

// 設置顏色的自定義指令
Vue.directive('setcolor',{
    // el:當前使用這個指令的元素
    // binding:它是一個對象，裏面有一個屬性value,就是當前指令所綁定的值
    inserted(el,binding){
        console.log(binding)
        el.style.color = binding.value
    }
})

細節：

命名細節：建議定義指令的時候命名都是小寫

update鉤子函數可處理當數據或者模板內容發生變化的時候就自動的觸發

// 添加update,監聽指令的值的變化，以便頁面進行刷新
update(el,binding){
    console.log(el)
    console.log(binding)
    el.style.color = binding.value
}

過濾器

做用：對傳入的數據進行處理，返回合理的結果

種類：

全局過濾器：在vm實例以前(外面)建立的過濾器
局部過濾器：在組件內部建立的過濾器

如何定義

Vue.filter(名稱，函數)

細節

過濾器會默認接收一個參數，這個參數就是當前調用過濾器的數據對象
若是你手動傳遞了參數，也不會影響默認參數的傳遞，意味着過濾器中直接在默認參數後添加新的接收形參就能夠了
過濾器的函數「必定」要寫return,由於過濾器必定要返回結果

如何調用？

經過管道符|
格式：須要調用過濾器的數據 | 過濾器名稱

// 添加全局的自定義過濾器
Vue.filter('timeForamt', (date,seperator1) => {
    // var date = new Date();
    // var seperator1 = "/";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    return currentdate;
})

計算屬性

什麼是計算屬性：它是一個屬性對象，裏面能夠封裝複雜的業務邏輯--方法

你在計算屬性中定義是的函數，可是能夠像使用普通屬性同樣來使用計算屬性
裏面的函數是一個屬性，因此不能以函數的方式進行調用，不然報錯

什麼場景使用計算屬性：當你的模板中的業務比較複雜的時候就可使用計算屬性進行封裝

當計算屬性中依賴的數據發生變化的時候，這個計算屬性就會被觸發
所謂依賴的數據就是指裏面所依賴的this的成員

它與普通方法的區別

普通方法沒有緩存機制，只要你使用到了方法，就必須進行方法的調用執行
而計算屬性是基本依賴進行緩存的，意味着只要依賴項的值沒有變化，那麼計算屬性不會再從新的調用，而是使用上一次的計算結果--提升效率

使用計算屬性實現搜索功能

computed: {
    search(){
        // 監聽用戶關鍵字的變化，只是用戶輸入有變化，就須要從新進行搜索
        // 計算屬性中的函數通常都會返回一個計算結果
        // var result = []
        // for(var i=0;i<this.brandList.length;i++){
        //     // 說明這個對象的name值中包含關鍵字，這就是我要找的記錄之一
        //     // 若是沒有輸入任何的關鍵字，那麼this.userKey默認就是""
        //     if(this.brandList[i].name.indexOf(this.userKey) != -1){
        //         result.push(this.brandList[i])
        //     }
        // }
        // return result
        // 每次都會從數組中取出一個值，傳遞給回調函數中的參數value
        // 在回調函數中對Value進行檢測判斷若是知足條件，那麼就會將value值存儲到filter方法內部建立的臨時數組arr中，最終將這個數組arr返回
        // forEach  map  filter
        return this.brandList.filter((value) => {
            return value.name.indexOf(this.userKey) != -1
        })
    }
}

偵聽屬性--監聽器

計算屬性有一個不足：不能響應異步操做的結果。若是須要監聽異步操做時數據的變化，就須要使用到watch

watch監聽器如何添加

偵聽器是一個屬性
裏面的方法名稱不能隨意，必須和你須要偵聽的屬性名稱徹底一致

watch:{
    // 方法的名稱必須和你想要偵聽的data中的成員名稱一致
    first(newvalue,oldvalue){
        setTimeout(() => {
            console.log(newvalue,oldvalue)
            this.fullname = newvalue.trim().toUpperCase() +":"+this.second
        }, 100);
    },
        second(newvalue,oldvalue){
            console.log(newvalue,oldvalue)
        }
}

watch監聽如何實現深度監聽

什麼是深度監聽：再也不是this的直接成員，面是this的成員的成員

兩種實現方式

handler +deep
'對象.屬性'(){}

obj:{
    // 經過handler函數進行偵聽
    handler(nv,ov){
        console.log(nv.name,nv.age)
    },
    // 設置爲深度偵聽
    deep:true
}
// 偵聽指定的成員值的變化
'obj.name' (nv){
    console.log(nv)
}

何時使用偵聽器？