vue自定义:directive自定义指令，自定义事件，自定义组件

自定义指令

指令

• 指令是用来操作DOM的

• 指令的使用形式：属性

• 自定义指令方式：

  • 全局注册指令
    • Vue.directive（指令的名称，指令的配置项）
  • 局部注册指令
    • directives:{ ‘指令名称’ : 指令的配置项 }

指令的配置项

• 指令的配置项提供了5个钩子函数
• 这些钩子函数中的参数为 el，binding，vnode，oldVnode
  • el：指令绑定的元素，可以用来直接操作DOM（除了el之外，其它参数都应该是只读的，如果需要钩子函数数据共享-dataset）
  • binding：指令的详细信息，它是一个对象
    • name : 指令名，不包括v-前缀
    • value：指令的绑定值（是算式会计算结果）
    • oldValue：指令绑定的前一个值（update和componentUpdated钩子中可用）
    • expression：字符串形式的指令表达式（不会计算结果）
    • arg：传给指令的参数
    • modifiers：一个包含修饰符的对象
  • vnode：Vue编译生成的虚拟节点
  • oldVnode：上一个虚拟节点（update和componentUpdated钩子中可用）

钩子函数

• bind
  • 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• inserted
  • 被绑定元素插入父节点时调用
• update
  • 当前指令绑定的元素发生改变（类似事件的self）
• componentUpdated
  • 当前绑定元素发生改变，或是子元素发生改变（类似事件冒泡）
• unbind
  • 只调用一次，指令与元素解绑时调用（组件销毁时触发）

自定义事件

• 格式： v-on:aa = ‘fn’/@aa = “fn”

• 原理：事件的发布和订阅

• 使用：
  1.通常情况下

  • 在created、beforeMount、mounted中通过$on发布事件，this.$on（“事件名”，fn）,再把事件的订阅写入一个函数，通过这个函实现事件的执行

  2 . 通过事件进行字符组件通信

  • 在methods定义一个函数，通过@自定义事件名 = “函数名”绑定到子组件上，在子组件中不需要使用props接收，使用一个函数来触发事件的订阅就能用了

自定义组件

自定义组件创建

1.把效果写入一个html中
2.创建js文件，

• import引入vue和html文件，
• 创建一个常量，接收一个代码块，里面为一个install函数，函数中为一个vue的组件的全局声明
• export default 导出这个常量

自定义封装组件，这个导出对象中必须有一个关键key

自定义组件使用（cli中）

1. import 导入cli的入口文件 mainjs
2. 注入到Vue对象中（Vue.use（“组件名”））
3. 就可以在所有文件中使用了（直接使用标签就能用了）