第二章 學習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官方提供的指令