第二章 學習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
}
}
})
複製程式碼