vue3.0自定义指令(drectives)
在大多数情况下,你都可以操作数据来修改视图,或者反之。但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令。
举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做。
const app = Vue.createApp({
mounted(){
this.$refs.input.focus();
},
template: `<input type="text" ref="input" />`,
});
在mounted钩子函数里,通过 $refs 获取需要聚焦的 DOM 元素,然后调用 focus 方法完成自动聚焦的功能。
基本使用
上面做法已经实现了我们需要的功能,但是假如说我们有多个组件都需要这个功能,那我们只能把这段代码复制过去,重新实现逻辑。我们下面看下如果使用自定义指令,应该怎么做。
const app = Vue.createApp({
// 通过 v-[自定义指令名称] 绑定自定义指令
template: `<input type="text" v-focus/>`,
});
// 注册一个全局自定义指令
app.directive('focus',{
// 当被绑定的元素插入到DOM的时候执行..
mounted(el){
el.focus();
}
})
如上,我们定义了一个全局自定义指令 focus
,并通过 v-focus
绑定到需要聚焦的 input 元素上。如果,其他组件或模块也需要聚焦功能,只要简单的绑定此指令即可。
自定义指令的钩子函数
我们在上面定义指令的时候,会发现其中包含了 mounted
钩子函数,指令还提供了如下钩子函数,我们用代码的形式来给大家列出来。
app.directive('directiveName', {
// 指令绑定元素挂载前
beforeMount(el) {},
// 指令绑定元素挂载后
mounted(el, binding) {},
// 指令绑定元素因为数据修改触发修改前
beforeUpdate(el) {},
// 指令绑定元素因为数据修改触发修改后
updated(el) {},
// 指令绑定元素销毁前
beforeUnmount(el) {},
// 指令绑定元素销毁后
unmounted(el) {},
});
效果就不一一列举了,有兴趣大家可以尝试下分别触发这些钩子函数。指令钩子函数大部分与组件很类似,大家可以对比着来看。
动态指令参数
下面,我们再来看一个例子。
const app = Vue.createApp({
template: `<div class="box" v-abs-top="num" style="position:absolute;" ></div>`,
});
// 在很多时候,你可能想在 mounted 和 updated 时触发相同行为,而不关心其它的钩子,就这样写
app.directive('absTop', (el) => {
el.style[binding.arg] = '100px';
});
我们在 div 元素上绑定 absTop
指令,div 元素本身定位是 absolute,指令执行让绑定元素的 top 为 100px。这时候,我想在绑定指令的时候能够传一个参数,使得元素的 top 值可以根据参数来改变。代码如下:
const app = Vue.createApp({
data() { return { num: 100 } },
template: `<div class="box" v-abs-top="num"></div>`,
});
app.directive('absTop', (el, binding) => {
el.style.top = binding.value + 'px';
});
元素可以通过 v-directive="value"
传入动态参数,指令通过钩子函数的第二个参数 binding.value 来接收参数。
如果其他元素可能不是修改 top 的值,有可能是 left、right 或者 bottom,那么指令可以动态指定吗?其实也是可以做到的。首先,我们修改模板为:
<div class="box" v-abs:left="num"></div>
然后修改指令本身
app.directive('absTop', (el, binding) => {
el.style[binding.arg] = binding.value + 'px';
});
在 v-mydirective:[argument]="value"
,arguments 也是可以动态改变的,这样,就可以完美的实现上述要求了。
组件的使用
组件中绑定指令与 DOM元素绑定指令并没有什么不同,指令会获取组件的原生 根DOM
来操作。但是要注意的是,在 vue3.0 中,组件可能有多个根节点,指令绑定在多根节点组件是有问题的。
局部自定义指令
最后,再来简单说下局部自定义指令是怎么定义的。
const app = Vue.createApp({
directives: {
focus: {
// 指令的定义
mounted(el) {
el.focus()
}
}
}
}
局部指令定义和全局指令基本一致,如上所示,在组件中定义 directives 就可以了。
总结
自定义指令可以提取出原生DOM操作的逻辑。所以指令的应用范围主要表现在,当一些操作涉及到 DOM 底层时,而且操作逻辑可能用于多处地方,就适合用指令来封装这些逻辑。
最新文章
- 如何修改MyEclipse项目的web context-root
- iframe
- 美化iTerm2
- python-getattr
- javascript优化--10模式(设计模式)01
- 未能正确加载“radlangsvc.package,radlangsvc.vs,version=10.0.0,culture=neutra
- .net framework缓存遍历
- 设置textview显示框内容不可编辑不可选择。
- ios--uitextfield动态限制输入的字数(解决方式)
- stl学习之模板
- Git使用过程
- pyfits 读取bintable
- (中等) HDU 1043 Eight,经典搜索问题。
- 视觉SLAM中相机详解
- python列表中的pop函数
- 附近有什么?8款可以查周边的App
- java.lang.ClassCastException: class com.sun.jersey.core.impl.provider.entity.XMLJAXBElementProvider$Text
- [CB转帖]台湾晶圆厂产能居全球第一 大陆排名第五但增长最多
- WDA基础三:简单的INPUT选择,简单的TABLE显示
- ldconfig命令
热门文章
- 生僻的mysql
- 关于 spring security 对用户名和密码的校验过程
- tomcat安装及环境变量配置
- 第2.3节 Python运算符大全
- moviepy音视频剪辑:使用concatenate_videoclips和clips_array将多个视频合成一个顺序播放或同屏播放的视频
- PyQt(Python+Qt)学习随笔:富文本编辑器QTextEdit功能详解
- 第二十七章、containers容器类部件QTabWidget选项窗部件详解
- 第9.2节 Python的文件打开函数open详解
- 第8.32节 Python中重写__delattr__方法捕获属性删除
- 问题: 刚安装的PyCharm执行代码报“ModuleNotFoundError: No module named XXXX”错