vue3.0自定义指令(drectives)知识点总结


Posted in Vue.js onDecember 27, 2020

在大多数情况下,你都可以操作数据来修改视图,或者反之。但是还是避免不了偶尔要操作原生 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 底层时,而且操作逻辑可能用于多处地方,就适合用指令来封装这些逻辑。

到此这篇关于vue3.0自定义指令(drectives)知识点总结的文章就介绍到这了,更多相关vue3.0中drectives详解内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue实现广告栏上下滚动效果
Nov 26 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 #Vue.js
在vue项目中封装echarts的步骤
Dec 25 #Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 #Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 #Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 #Vue.js
vue使用require.context实现动态注册路由
Dec 25 #Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 #Vue.js
You might like
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
利用python获得时间的实例说明
2013/03/25 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Numpy数组的保存与读取方法
2018/04/04 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
python 项目目录结构设置
2020/02/14 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
写好求职信第一句话的技巧
2013/10/26 职场文书
小学教师自我鉴定
2013/11/07 职场文书
有针对性的求职自荐信
2013/11/14 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
运动会通讯稿200字
2014/02/16 职场文书
企业办公室岗位职责
2014/03/12 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
房产分割协议书范文
2014/11/21 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
学历证明样本
2015/06/16 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA