学习Vue框架第六天心得

1.如何注册自定义指令

• 当要操作真实DOM元素时，需要用到自定义指令
• Vue.directive(“名字”，配置项） 调用的时候 => v-名字 全局自定义指令
• directives：{名字：{配置项}} 注册局部自定义指令

<div id="box">
    <!--通过v-focus来去使用自定义指令-->  
      <input type="text" v-focus>
  </div>

Vue.directive("focus",{
	inserted:function (el){  //当绑定的元素插入dom的时候就会执行这个函数
		console.log(el)//拿到input真实dom节点
		el.focus()//让输入框获取到焦点
	}
})

2.自定义指令的钩子函数

• bind：初始化的时候，函数执行
• inserted：他插入到父元素的时候，父元素存在，函数执行
• update：数据更新前，函数执行
• componentupdated：数据更新后，函数执行
• unbind：解绑的时候，函数执行

3.自定义指令钩子函数的参数

钩子函数的参数：(el, binding, vnode)

<div id="app">
        <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
    </div>

• el:指令所绑定的元素，可以直接操作DOM
• binding：一个对象，包含以下属性
  • name：获取自定义指令名
  • value：指令的绑定值；例如：v-my-directive=“1+1”，value的值是2；
  • expression: 绑定值的字符串形式；例如：v-my-directive=“1+1”，expression的值是’1+1’；
  • arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 ‘foo’；
  • vnode：Vue编译的生成虚拟节点；
  • modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{‘a’:true,‘b’:true}

4.函数简写

大多数情况下，我们可能想在 bind 和 update 钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写:

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

5.对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法类型的 Javascript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})