Directive(指令)

1.1 声明一个全局指令

Vue.directive('x', dirctiveOptions)你就可以在任何组件里用v-x了

Vue.directive('x',{
  inserted: function (el) {
    el.addEventListener('click', () =>{console.log('x')})
  }
})

1.2 声明一个局部指令，该指令只能在该组件里使用

new Vue({
  ...,
  directives: {
    "x": directiveOptions
  }
})

2. directiveOptions(指令选项)有 5 个函数属性 ,常用的只有前两种，用时查看文档

• bind类似 created :只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

接受的参数有:

（el (你所绑定的这个元素),info（除了元素之外还有哪些东西）,vnode（元素对应的虚拟节点）,oldVnode（之前的虚拟节点）），该参数都是Vue传过来的

• inserted 类似 mounted ：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

接受的参数同上

• update 类似 updated ：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

接受的参数同上

• componentUpdated ：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

接受的参数同上

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

接受的参数同上

不用v-on实现事件绑定，创建v-on2，自定义实现事件绑定

指令总结：作用

• 主要用于减少重复的DOM操作

mixins(混入=== 复制)

• 其作用：减少data methods 钩子的重复

mixin 例子

代码示例

mixins技巧

• 选项智能合并 -见文档

• 使用全局的Vue.mixin（不推荐使用） -见文档

Extends(继承、实际上也是复制的意思)

• 减少重复

• extends 是比 mixins 更抽象一点的封装，实际工作中用的很少

provide(提供) 和inject（注入，注射）

• 祖先提供东西，后代注入东西
• 作用：大范围、隔N代共享信息

代码示例