Vue.js（自定义指令）

自定义指令

• Vue.js中，除了预定义的13个指令外，还允许用户自定义扩展指令。
• 创建自定义指令

   	inserted( el ){ //当元素被加载到DOM树时触发
....  el 为当前一个写有v-指令的DOM元素对象
函数中，执行原生的DOM API
}
     })
1
2
3
4
5

- 强调: ‘指令名’不用加v-前缀!  只有在html中使用时，才加前缀
1

• 使用自定义指令
  • <any v-指令名>
  • 强调: 必须前边加v-
• 什么是钩子函数: 一个对象的不同生命时期的某个时刻，会自动调用的函数——称为“生命周期钩子函数”
  • 为什么: 对象在生命周期的某个阶段，可能都需要我们帮助完成一些特殊功能
  • 何时: 只要希望在对象的生命周期中某个阶段，对对象执行一些操作时
  • 如何: 指令的选项对象提供了如下生命周期钩子函数：——了解
    • (1)bind: 当自定义指令绑定到元素上时调用
    • (2)inserted：当绑定了自定义指令的元素插入到DOM时自动调用
    • (3)update：元素绑定的数据发生了更新时自动调用
    • (4)componentUpdated：元素的子组件发生更新时自动调用
    • (5)unbind：元素与自定义指令解除绑定时调用