Vue入門指南-02 自定義全局和局部指令

vue.js

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

自定義指令在我們的項目中很常用, 所以要認真學習。

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

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

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

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

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

<code>
  {{ message }}  // 通過差值表達式的方式將數據渲染到頁面
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(){} })/<code>

自定義指令中的bind函數

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

注意 : 和樣式相關的操作，一般都可以在bind執行，只要通過指令綁定了元素，不管這個元素有沒有被插入到頁面中去，這個元素肯定有了一個內聯樣式。

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

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

因為一個元素, 只有在插入DOM之後, 才能操作他的js行為

<code>// 舉例Vue.directive(“color”，{     bind: function(el, binding){        //這個指令綁定的樣式顏色是固定死的，我們可以通過指令的綁定值來動態改變樣式顏色        el.style.color ="red"     }, })// 需要注意: 指令綁定的值如果不是字符串而是一個變量，就需要你在data中定義這個變量的值// 下面展示通過使用指令傳入的顏色來來定義綁定標籤的顏色
 定義指令：Vue.directive(" color ",{     bind: function(el, binding){         el.style.color = binding.value     } })// 在自定義局部指令的時候, 我們也可以通過給v-color綁定一個變量, 通過動態改變變量的值來控制標籤的顏色 /<code>

自定義指令中的inserted函數

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

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

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

自定義指令中的updata函數

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

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

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

<code>例如:
  {{ message }}  // 通過差值表達式的方式將數據渲染到頁面
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        }    }})/<code>

以上就是自定義指令的全部內容來，不直到你學會來沒有，俗話說好記性不如爛筆頭，有時間請自己實踐操作一番。

下一篇文章將為大家介紹Vue官方提供的指令

請關注我，定時更新前端相關知識及項目案例

閱讀更多 番茄學前端 的文章

關鍵字: 瀏覽器 跳槽那些事兒 虛擬機