day2 自定义指令

钩子函数

• bind
  • 只调用一次，指令第一次绑定到元素时调用
  • 适用于绑定css样式
• inserted
  • 被绑定元素插入父节点时调用
  • 适用于绑定js方法
• update
  • 所在组件的VNode更新是调用

钩子函数参数

• el - 指令绑定元素，可以用于直接操作DOM
• binding - 一个对象
  • name 指令名
  • value 指令绑定值（可以理解为外部参数传递）
    • 例如：v-my-directive = "1 + 1"绑定值为2
    • 支持对象形式
  • oldValue 指令绑定前一个值
  • expression 字符串形式的指令表达式
    • 例如：v-my-directive = "1 + 1"表达式为1 + 1
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

注意要点

• 所有的指令都必须以v-开头

• js中定义需以驼峰式命名

• html中调用以-进行分割

    <input type="text" v-model='keywords' placeholder="请输入搜索内容"  v-color-test="'blue'">
    <script>
      Vue.directive('colorTest',function(el,binding){
          el.style.color = binding.value
      })
    </script>
  

全局定义

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

私有定义

const vue = new Vue({
 directives: {
   focus: {
     // 指令的定义
     inserted: function (el) {
       el.focus()
     }
   }
 }
})

简写

• 在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

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