今天完成的事：

进行任务6-10

明天计划的事：

继续任务6-10

遇到的问题：

暂无

收获：

自定义一个指令

分全局自定义和局部自定义

对于全局自定义指令的创建，需要使用 Vue.directive接口

Vue.directive('demo', Opt)

括号里的第一个参数为自定义指令名称，第二个参数为一个函数或对象，对象内可以包含多个钩子函数

对于局部组件，我们需要在组件的钩子函数directives中进行声明

Directives: {    Demo:     Opt
}

Vue中的指令可以简写，上面Opt是一个对象，包含了5个钩子函数，可以根据需要只写其中几个函数。如果想在 bind 和 update 时触发相同行为，而不关心其它的钩子，那么可以将Opt改为一个函数。

let Opt = function(el,binding,vnode){ }

使用自定义指令

可以像v-text=”’test’”一样，把需要传递的值放在‘=’号后面传递过去。

可以像v-on:click=”handClick” 一样，为指令传递参数’click’。

可以像v-on:click.stop=”handClick” 一样，为指令添加一个修饰符。

可以像v-once一样，什么都不传递。

自定义指令的钩子函数

指令钩子函数会被传入以下参数：

• 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 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。