iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 27
2
自我挑戰組

vue.js 30天學習軌跡系列 第 27

Day27 vue.js - 自定義指令 Custom Directive

自定義指令 Custom Directive

除了核心功能默認內置的指令集(v-model、v-if)之外,Vue還允許您註冊自己的自定義指令。
那就是使用 Vue.directive !!

Vue.directive('自訂義的名稱', {  
  鉤子函數 function (鉤子函數的參數) {   
    方法內容
  }
})

做一個簡單的手機號碼驗證

使用 V-自定義名稱加入所要綁定之元素(如下: v-checkphone)

<div id="app">
  <input type="text" v-model="inputMessage" v-checkphone>
</div>
Vue.directive('checkphone', {
  update: function(el, binding, vnode) {
    var value = el.value;
    var phone = /^09[0-9]{8}$/
    if(!phone.test(value)){
      el.className = 'red'
    }else{
      el.className = 'green'
    }
  },
})
new Vue({
  el: "#app",
  inputMessage :''
})

鉤子函數(Hook function)

  • bind:只調用一次,指令第一次綁定到元素時調用。在這裡可以進行一次性的初始化設置。

  • inserted:被綁定元素插入父節點時調用(僅保證父節點存在,但不一定已被插入文檔中)。

  • update:所在組件的VNode更新時調用,但是可能發生在其子VNode更新之前。
    指令的值可能發生了改變,也可能沒有。

  • componentUpdated:指令所在組件的VNode 及其子VNode全部更新後調用。

  • unbind:只調用一次,指令與元素解綁時調用。


鉤子函數的參數 (Directive Hook Arguments)

  • el:指令所綁定的元素,可以用來直接操作DOM 。
  • binding:一個對象,包含以下屬性:
    • name:指令名,不包括v-前綴。
    • value:指令的綁定值,例如:v-my-directive="1 + 1"中,綁定值為2。
    • oldValue:指令綁定的前一個值,僅在update和componentUpdated鉤子中可用。
      無論值是否改變都可用。
    • expression:字符串形式的指令表達式。
      例如v-my-directive="1 + 1"中,表達式為"1 + 1"。
    • arg:傳給指令的參數,可選。例如v-my-directive:foo中,參數為"foo"。
    • modifiers:一個包含修飾符的對象。
      例如:v-my-directive.foo.bar中,修飾符對象為{ foo: true, bar: true }。
  • vnode:Vue編譯生成的虛擬節點。移步VNode API來了解更多詳情。
  • oldVnode:上一個虛擬節點,僅在update和componentUpdated鉤子中可用。

列印自定義鉤子函數中的參數

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})

/images/emoticon/emoticon08.gif


上一篇
Day26 vue.js - 使用mixin將多個組件混入
下一篇
Day28 vue.js - Vue cli 3.0 環境建置
系列文
vue.js 30天學習軌跡30

尚未有邦友留言

立即登入留言