Article directory
custom directive
1. Custom Instructions
Vue officially provides common built-in instructions such as v-for, v-model, and v-if. In addition, vue also allows developers to customize instructions.
Custom directives in vue are divided into two categories:
- private custom directive
- Global custom directive
2. The syntax for declaring private custom directives & using custom directives
In each vue component, private custom directives can be declared under the directives node.
When using custom directives, you need to add the v- prefix.
<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. The syntax for declaring a global custom directive
Globally shared custom directives need to be declared through the "Single Page Application Instance Object".
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 function
The mounted function is only called when the element is inserted into the DOM for the first time. The mounted function is not fired when the DOM is updated.
The updated function is called after every DOM update.
Note:
When using a custom command in a vue2 project, [ mounted -> bind ] [ updated -> update ]
Annotate Global Custom Directives
<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>
global
// 注册一个全局自定义指令 v-focus
// app.directive( 'focus', {
// mounted( el ) {
// el.focus()
// },
// updated( el ) {
// el.focus()
// }
// } )
5. Function shorthand
If the logic in the mounted and updated functions is exactly the same, it can be abbreviated.
<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>
global
// 注册一个全局自定义指令 v-focus
// app.directive( 'focus', {
// mounted( el ) {
// el.focus()
// },
// updated( el ) {
// el.focus()
// }
// } )
// app.directive( 'focus', (el)=>{
// el.focus()
// } )
6. Parameter values of instructions
When binding an instruction, you can bind specific parameter values to the instruction in the form of an "equal sign".
<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>
