Vue基础系列：添加自定义指令

1.全局自定义指令

自定义指令的指令中的参数：

• 指令名称，不包含v-
• 包含一个对象，对象中包含钩子函数

Vue.directive('focus', {
      bind: function (el) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
        // 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
      },
      inserted: function (el) {  // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
        el.focus() //获取焦点
        // 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
      },
      updated: function (el) {  // 当VNode更新的时候，会执行 updated， 可能会触发多次

      }
    })

2.定义私有的指令

directives: { // 自定义私有指令
        'fontweight': { // 设置字体粗细的
          bind: function (el, binding) {
            el.style.fontWeight = binding.value
          }
        },
        'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
          el.style.fontSize = parseInt(binding.value) + 'px'
        }
      }

3.自定义指令中的参数

• bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

• inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于文件中）。

• update：被绑定元素所在的模板更新时调用，而不是绑定值是否变化通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

• componentUpdated：被绑定元素所在模板完成一次更新周期时调用。

• unbind：只调用一次，指令与元素解绑时调用。

4.钩子函数的参数

钩子函数被赋予了以下参数：

• el：指令所绑定的元素，可以用来直接操作DOM。
• binding：一个对象，包含以下属性：
  • name：指令名，不包括v-前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1"，value的值是2。
  • oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
  • 表达：绑定值的字符串形式例如v-my-directive="1 + 1"，表达的值是"1 + 1"。
  • arg：传给指令的参数。例如v-my-directive:foo，arg的值是"foo"。
  • 修饰符：一个包含修饰符的对象。例如：v-my-directive.foo.bar，修饰符对象modifiers的值是{ foo: true, bar: true }。
• vnode：Vue编译生成的虚拟节点，查阅VNode API了解更多详情。
• oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。

< div  id = “hook-arguments-example”  v-demo：hello.ab = “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>' +
      '表达式：' + s（binding.expression）+ '<br>' +
      '参数：'    + s（binding.arg）+ '<br>' +
      '修饰符：'   + s（binding.modifiers）+ '<br>' +
      'vnode keys：' + Object .keys（vnode）.join（'，'）
  }
}）
新的 Vue（{
  el：'＃hook-arguments-example'，
  数据：{
    消息：'你好！'
  }
}）

5.自定义指令的缩写

directives: { // 自定义私有指令
        //自定义指令的缩写
        'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
          el.style.fontSize = parseInt(binding.value) + 'px'
        }
      }