自定义指令
1. 自定义指令
vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。除此之外 vue 还允许开发者自定义指令。
vue 中的自定义指令分为两类，分别是：
- 私有自定义指令
- 全局自定义指令
2. 声明私有自定义指令的语法 & 使用自定义指令
在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。
在使用自定义指令时，需要加上 v- 前缀。
<template> <div> <h1>App 组件</h1> <input type="text" v-focus> <hr> </div> </template> <script> export default { name: 'App', directives: { // 自定义指令 focus: { // 当被绑定的元素插入到DOM中时，自动触发mounted函数 mounted(el) { // 让绑定的元素自动获取焦点 el.focus() } } } } </script> <style> </style>
3. 声明全局自定义指令的语法
全局共享的自定义指令需要通过“单页面应用程序的实例对象”进行声明。
main.js
// 创建 Vue 实例对象 const app = createApp(App) // 注册一个全局自定义指令 v-focus app.directive( 'focus', { mounted( el ) { el.focus() } } )
<template> <div> <h1>App 组件</h1> <input type="text" v-focus> <hr> </div> </template> <script> export default { name: 'App', directives: { // // 自定义指令 // focus: { // // 当被绑定的元素插入到DOM中时，自动触发mounted函数 // mounted(el) { // // 让绑定的元素自动获取焦点 // el.focus() // } // } } } </script> <style> </style>
4. updated 函数
mounted 函数只在元素第一次插入 DOM 时被调用，当 DOM 更新时 mounted 函数不会被触发。
updated 函数会在每次 DOM 更新完成后被调用。
注意：
在 vue2 的项目中使用自定义指令时，【 mounted -> bind 】【 updated -> update 】
注释全局自定义指令
<template> <div> <h1>App 组件</h1> <input type="text" v-focus v-model="val"> <button @click="add"> +1 </button> <hr> </div> </template> <script> export default { name: 'App', data() { return { val: '' } }, methods: { add() { this.val += 1 } }, directives: { // 自定义指令 focus: { // 当被绑定的元素插入到DOM中时，自动触发mounted函数 mounted(el) { // 让绑定的元素自动获取焦点 el.focus() }, updated( el ) { el.focus() } } } } </script> <style> </style>
全局
// 注册一个全局自定义指令 v-focus // app.directive( 'focus', { // mounted( el ) { // el.focus() // }, // updated( el ) { // el.focus() // } // } )
5. 函数简写
如果 mounted 和updated 函数中的逻辑完全相同，则可以简写。
<template> <div> <h1>App 组件</h1> <input type="text" v-focus v-model="val"> <button @click="add"> +1 </button> <hr> </div> </template> <script> export default { name: 'App', data() { return { val: '' } }, methods: { add() { this.val += 1 } }, directives: { // 自定义指令 // focus: { // 当被绑定的元素插入到DOM中时，自动触发mounted函数 // mounted(el) { // // 让绑定的元素自动获取焦点 // el.focus() // }, // updated( el ) { // el.focus() // } // } focus(el) { el.focus() } } } </script> <style> </style>
全局
// 注册一个全局自定义指令 v-focus // app.directive( 'focus', { // mounted( el ) { // el.focus() // }, // updated( el ) { // el.focus() // } // } ) // app.directive( 'focus', (el)=>{ // el.focus() // } )
6. 指令的参数值
在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值。
<template> <div> <h1 v-color="'red'">App 组件</h1> <input type="text" v-focus v-model="val"> <button @click="add"> +1 </button> <hr> </div> </template> <script> export default { name: 'App', data() { return { val: '' } }, methods: { add() { this.val += 1 } }, directives: { // 自定义指令 // focus: { // // 当被绑定的元素插入到DOM中时，自动触发mounted函数 // mounted(el) { // // 让绑定的元素自动获取焦点 // el.focus() // }, // updated( el ) { // el.focus() // } // } focus(el) { el.focus() }, // 第二个形参为传递的参数对象 color( el, color ) { // console.log(color); // color.value 为指令等号后面为指令绑定的值 el.style.color = color.value } } } </script> <style> </style>
