Vue入門指南-02自定義全局和局部指令 (快速上手vue)

第二章 學習vue中的自定義指令

自定義指令在咱們的項目中很經常使用, 因此要認真學習。

第一部分: 使用Vue.directive()自定義全局的指令

注意 : 參數 1 是指令的名稱, 在自定義指令的時候, 指令的名稱前面不須要加 "v-"前綴

注意 : 參數 2 是一個對象, 對象身上有一些指令的相關函數, 這些函數能夠在特定的階段, 執行相關的操做句號

注意 : 在參數 2 中的相關函數中,第一個參數，永遠是el,表示被綁定了指令的那個元素，這個el參數，是一個原生的js對象

注意 : 在參數 2 中的相關函數中,都有一個binding參數，是一個對象，它包含如下屬性：name/指令名，value/指令的綁定值（例如v-mydirective="'red'"）值就爲red，剩下的屬性去看官網用的少 一樣導入vue, 建立VM實例對象

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  {{ message }}  // 經過差值表達式的方式將數據渲染到頁面
</div>
var VM = new Vue({
    el: '#app', // 表示當咱們new的這個Vue實例, 要控制頁面上的那個區域
    data: { // data屬性中存放的是el中要用到的數據,這裏的data就是MVVM中的M專門用來保存每一個頁面的數據
        message: 'Hello Vue!'
    },
})
// 自定義指令方法：
Vue.directive(「指令名稱」，{ 
    bind: function(){}, 
    inserted: function(){}, 
    updata: function(){} 
})
複製代碼

自定義指令中的bind函數

每當指令綁定到元素上的以後，會當即執行這個bind函數，只執行一次

注意 : 和樣式相關的操做，通常均可以在bind執行，只要經過指令綁定了元素，無論這個元素有沒有被插入到頁面中去，這個元素確定有了一個內聯樣式。

未來元素確定會顯示頁面中去，這時候，瀏覽器的渲染引擎必然會解析樣式，應用給這個元素

注意 : 在元素幹綁定了指令的時候，尚未插入到DOM中去，這時候調用例如：el.focus（獲取焦點）等js行爲相關的操做，須要在inserted方法中去執行，防止js行爲不生效

由於一個元素, 只有在插入DOM以後, 才能操做他的js行爲

// 舉例
Vue.directive(「color」，{ 
    bind: function(el, binding){
        //這個指令綁定的樣式顏色是固定死的，咱們能夠經過指令的綁定值來動態改變樣式顏色
        el.style.color ="red" 
    }, 
})
// 須要注意: 指令綁定的值若是不是字符串而是一個變量，就須要你在data中定義這個變量的值
// 下面展現經過使用指令傳入的顏色來來定義綁定標籤的顏色
<p v-color=" 'red' "></p> 
定義指令：Vue.directive(" color ",{ 
    bind: function(el, binding){ 
        el.style.color = binding.value 
    } 
})
// 在自定義局部指令的時候, 咱們也能夠經過給v-color綁定一個變量, 經過動態改變變量的值來控制標籤的顏色 
複製代碼

自定義指令中的inserted函數

表示元素插入到DOM中的時候會執行inserted函數（觸發一次）

注意 : 和js行爲相關的操做，須要在inserted方法中去執行，防止js行爲不生效

// 例如: 
<p v-color=" 'red' "></p> 
定義指令：Vue.directive(" color ",{ 
    bind: function(el, binding){ 
        el.style.color = binding.value // 設置綁定該指令的標籤顏色
    },
    inserted: function(el, binding){ 
        el.focus()  // 在這裏執行獲取焦點才管用
    } 
})
複製代碼

自定義指令中的updata函數

當組件更新的時候, 會執行updata函數, 可能會屢次觸發

第二部分: 使用Vue.directive()自定義全局的指令

使用方法和上面的全局指令同樣。只是自定義局部指令須要在VM實例中定義

例如:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  {{ message }}  // 經過差值表達式的方式將數據渲染到頁面
</div>
var VM = new Vue({
    el: '#app', // 表示當咱們new的這個Vue實例, 要控制頁面上的那個區域
    data: { // data屬性中存放的是el中要用到的數據,這裏的data就是MVVM中的M專門用來保存每一個頁面的數據
        message: 'Hello Vue!'
    },
    // 自定義局部指令
    directives: {
        "color":{
           bind: function(){}, 
           inserted: function(){}, 
           updata: function(){} 
        }
        // 下面這個是簡寫方式: 簡寫的function等同於把代碼寫到了bind和updata函數中
        color: function(el, binding) {
            el.style.color = binding.value
        }
    }
})

複製代碼

Vue入門指南(快速上手vue)