自定义指令
概念
vue 官方提供了v-text
、v-for
、v-model
、v-if
等常用的指令。除此之外 vue 还允许开发者自定义指令
有时候内置指令并不能满足我们所有场景的需求,或者说有时候我们想为元素附加一些特别的功能,这时候就可以通过自定义指令来实现
vue 中的自定义指令分为两类,分别是:
⚫ 局部自定义指令:组件内定义的指令,只有在当前组件中可以使用
⚫ 全局自定义指令:通过Vue创建的指令,可以在所有组件中使用
一 .自定义局部指令
1.定义局部自定义指令
局部自定义指令需要在组件的directives
结构中定义,它是一个单独的结构
语法
directives:{
指令名称:{
inserted(el,binding){
}
}
}
说明
inserted钩子函数
:被绑定元素插入父节点时调用,它只会触发一次- 如果想在
dom
更新时也触发自定义指令,可以添加updated钩子函数
- 关于钩子函数的参数
el
:指令所绑定的元素,可以用来直接操作 DOMbinding
:一个对象,包含多个属性,特别是里面的value
,通过它可以获取指令的绑定值,当用户给指令绑定了值的时候,通过binding.value
可以获取
注意:el
和binding
只是形参,可以自定义参数的名称
2.使用局部自定义指令
- 和之前的内置指令一样,使用
v-指令名称
来使用我们自定义的指令 - 在使用指令的时候,可以为指令绑定动态参数(从
binding.value
获取)
代码演示
品牌名称:<input type="text"
v-model="userdata.brandName"
v-myfocus
v-mycolor='"red"'>
----------------------------------------------------------------------
// 添加局部自定义指令
directives: {
myfocus: {
// el就是当前绑定这个指令的元素,可以用来直接操作dom
inserted (el) {
el.focus()
}
},
mycolor: {
inserted (el, binding) {
el.style.color = binding.value
}
}
}
二 .自定义全局指令
1.定义全局自定义指令
语法
一般选择在src/utils 文件夹下定义项目所用公共工具
语法格式
// 全局指令
Vue.directive(指令名称,{
// 配置及处理
inserted(el,binding){
}
})
暴露所写的全局自定义指令
import Vue from 'vue'
export const mycolor = Vue.directive('mycolor',{
inserted(el,binding){
el.style.color = binding.value
}
})
说明:
使用Vue.component
创建全局自定义指令
代码逻辑跟自定义局部指令一样 注意书写格式
inserted钩子函数
:被绑定元素插入父节点时调用
el
,binding
:钩子函数的参数
在每个组件中都能引入使用
2.使用全局自定义指令
- 引入定义好的全局指令
v-指令名称
使用这个全局指令
// 引入全局指令
import youcolor from '@/utils/mydirectives.js'
// 使用全局指令
品牌名称:<input type="text"
v-model="userdata.brandName"
v-myfocus
v-mycolor='"red"'>
----------------------------------------------------------------------
// 定义全局指令
import Vue from 'vue'
export const youcolor = Vue.directive('youcolor', {
inserted (el, binding) {
el.style.color = binding.value
}
})
三 .指令的封装
步骤
- 不用再引入vue
- 封装指令的配置主体
const 自定义指令名称 = {inserted(el,binding){}}
- 暴露封装的自定义指令
export
- 在需要的位置使用解构的方式引入
import {指令名} from '封装指令的文件的路径'
- 注册指令
directives:{指令名}
- 使用 按照内置指令的方式来使用 (正常使用)
代码演示:
// 引入全局指令
import {youcolor} from '@/utils/mydirectives.js'
// 注册指令
directives: {
youcolor
}
// 使用全局指令
品牌名称:<input type="text"
v-model="userdata.brandName"
v-youcolor='"red"'>
----------------------------------------------------------------------
// 定义指令--封装 暴露
export const youcolor = {
inserted (el, binding) {
el.style.color = binding.value
}
}
总结
封装暴露 > 组件当中(引入 注册 使用)