自定義指令

時間 2019-11-26

標籤自定義指令简体版

原文原文鏈接

基礎簡介

除了核心功能默認的內置指令（v-model和v-show），vue也容許註冊自定義指令。注意，在Vue2.0中，代碼複用和抽象的主要形式是組件，可是在有些狀況下，咱們須要對普通的DOM元素進行底層操做，這時候就須要咱們用到自定義指令。html

簡單事例，當頁面加載時元素就會得到焦點，可是實際上只要咱們代碼完成，頁面沒打開時這個輸入框已是聚焦狀態：vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="Vue.min.js"></script>
</head>

<body>
  <div id="app">
    <input v-focus>
  </div>
  <script>
    //註冊一個全局自定義指令v-focus
    Vue.directive('focus', {
      // 當綁定元素插入到DOM中
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    });
    var app = new Vue({
      el: '#app'
    });
  </script>
</body>
</html>

鉤子函數

咱們可使用Vue.directive的方法傳入執行id和定義對象來註冊一個全局的自定義指令，一個指令對象能夠提供幾個鉤子函數：node

bind：只調用一次，指令第一次綁定元素的時候調用，這時咱們能夠進行對它的一次性初始化設置。
inserted，被綁定元素插入父節點時的調用。
update，所在組件的 VNode 更新時調用，可是可能發生在組件的 VNode更新前，所以指令的值是不肯定的，可能有也可能沒有。
componentUpdated，指令所在組件的 VNode以及它以後的更新調用。
unbind，只調用一次，指令與元素解綁時調用。

定義對象的鉤子函數參數有（除了el以外其餘參數都是i只讀的）express

el：指令綁定的元素，能夠被用來直接操做DOM。
binding
- name：指令名，不包括 v- 前綴。
- value：指令的綁定值，例如：v-new-xkd:"1+2"；，綁定值爲3。
- oldValue：指令綁定的前一個值，只在update 和 componentUpdated 鉤子中使用。
- expression：字符串形式的指令表達式。例如上面 v-new-xkd中的"1+2"。
- arg：傳給指令的參數。
- modifiers：一個包含修飾符的對象。
vnode：Vue 編譯生成的虛擬節點。
oldVnode：上一個虛擬節點。

指令的參數能夠是動態的。自定義鉤子函數屬性屬性事例：app

<!DOCTYPE html>
<html lang="en">
<head>  
<meta charset="utf-8">
<script src="Vue.min.js"></script>
</head>

<body>  
<div id="hook" v-xkd:foo.a.b="message"></div>  
<script>    
// 使用自定義指令    
Vue.directive('xkd', {      
// 指令在綁定到元素要執行的操做      
bind: function (el, binding, vnode) {      
	var w = JSON.stringify;      
	// 準備將傳遞來的參數顯示在調用該指令的元素的innerHTML上   
	el.innerHTML =        
	'name: ' + w(binding.name) + '<br><br>' +        
	'value: ' + w(binding.value) + '<br><br>' +     
	'expression: ' + w(binding.expression) + '<br><br>' +  
	'argument: ' + w(binding.arg) + '<br><br>' +       
	'modifiers: ' + w(binding.modifiers) + '<br><br>' +   
	'vnode keys: ' + Object.keys(vnode).join(', ')     
    } 
})    
// 建立自定義指令    
new Vue({      
	el: '#hook',      
	data: {        
		message: '俠課島'      
	}    
})  </script></body></html>

函數簡寫

大多數狀況下，可能想在 bind 和 update 鉤子上作重複的動做，可是並不想關心其餘鉤子函數的狀況，咱們能夠這樣寫：函數

Vue.directive('func-abbr', function (el, binding) {
  el.style.backgroundColor = binding.value
})

對象字面量對象字面量

若是指令須要多個值，那麼能夠傳入一個JavaScript對象字面量；同一個特性內部，逗號隔開的多個從句被綁定爲多個指令實例。code

<div id="hook" v-demo="{ color: 'green', text: 'Chivalrous Island!'}"></div>

<script>
	Vue.directive('demo', function (el, binding) {
      console.log(binding.value.color);
      console.log(binding.value.text);
    })

    // 建立自定義指令
    new Vue({
      el: '#hook',
      data: {
        message: '俠課島'
      }
    })
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。