Vue----自定义指令
文章目录
- 自定义指令
-
- 1. 自定义指令
- 2. 声明私有自定义指令的语法 & 使用自定义指令
- 3. 声明全局自定义指令的语法
- 4. updated 函数
- 5. 函数简写
- 6. 指令的参数值
自定义指令
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>
