vue3 基础-自定义指令 directive
上篇内容是关于 mixin 混入的一些操作, 也是关于代码复用层面的, 本篇讲自定义指令 directive 也是为了实现复用而设计的一些小功能啦.
先来看看, 如果不用 directive 的场景下, 如何进行代码复用.
<!DOCTYPE html>
<html lang="en">
<head>
<title>不用 directive 时</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
// 当页面加载完就让其自动获得焦点
mounted () {
this.$refs.input1.focus()
this.$refs.input2.focus()
this.$refs.input3.focus()
},
template: `
<div>
<input ref="input1" />
<input ref="input2" />
<input ref="input3" />
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
可以看到这里的 this.$refs.input2.focus( ) 被重复调用了3次, 这种写法是没有能实现咱说的复用的. 而 derective 则就是为了将其封装为一个指令而设计的啦.
全局指令 directive
先来一个直观演示, 如上例我们自定义一个名为 focus 的全局指令, 功能是使其 dom 能获得焦点.
<!DOCTYPE html>
<html lang="en">
<head>
<title>自定义全局指令</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template: `
<div>
<input ref="input1" v-focus />
</div>
`
})
// 自定义一个全局指令 focus, 作用是让其 dom 获得焦点
app.directive('focus', {
mounted (el) {
el.focus()
}
})
const vm = app.mount('#root')
</script>
</body>
</html>
全局指令即可通过 app.directive('xxx', { }) 来定义, 使用的使用直接在 dom 中通过 v-xxx 即可.
局部指令 directive
同局部组件, 局部 mixin 几乎一样的操作, 就是在 vue 之外写一个对象, 然后通过 vue 中的某个属性进行引入啦.
<!DOCTYPE html>
<html lang="en">
<head>
<title>自定义局部指令</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// 自定义局部指令
const myDirective = {
focus: {
mounted (el) {
el.focus()
}
}
}
const app = Vue.createApp({
directives:myDirective,
template: `
<div>
<input ref="input1" v-focus />
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
需要注意这里的引入写法是键值对的方式哦, 感觉也是乱七八糟的:
directives:myDirective
当然关于指令的作用周期也可以是结合咱的8大生命周期函数如下:
beforCreate, created: 在 vue 实例创建前, 后 的自动执行
beforMount, mounted: 在 vue 组件渲染到页面前, 后 的自动执行
beforUpdate, updated: 在 data 数据变化前, 数据变化后并渲染后 的自动执行
beforUnmount, unmounted: 在 vue 实例被销毁 前, 后 的自动执行
自定义指令开发
这里简单来开发一个指令叫 v-position 实现元素的位置自定义效果.
<!DOCTYPE html>
<html lang="en">
<head>
<title>自定义指令开发</title>
<script src="https://unpkg.com/vue@3"></script>
<style>
.test {
position: absolute;
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return { num: 200 }
},
template: `
<div>
<div v-position="num" class="test">v-position 测试</div>
</div>
`
})
// 自定义全局指令 v-position 开发
app.directive('position', {
mounted (el, binding) {
el.style.top = binding.value + 'px'
},
updated (el, binding) {
el.style.top = binding.value + 'px'
}
})
const vm = app.mount('#root')
</script>
</body>
</html>
当只有 mounted 和 updated 的时候可以有个简写如下:
app.directive('position', (el, binding) => {
el.style.top = binding.value + 'px'
})
结合之前我们对指令传参的应用, 如 v-on:click = 'xxx' 的这种写法, 也是可以将参数传递给到 binding 的 arg中的, 那这样就可以对咱的这个 position 做 top, right, bottom, left 等参数啦.
<!DOCTYPE html>
<html lang="en">
<head>
<title>自定义指令开发</title>
<script src="https://unpkg.com/vue@3"></script>
<style>
.test {
position: absolute;
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return { num: 200 }
},
// v-position:xxx 这里就可以传参数啦
template: `
<div>
<div v-position:left="num" class="test">v-position 测试</div>
</div>
`
})
// 自定义全局指令 v-position 开发
app.directive('position', (el, binding) => {
// console.log('binding:', binding)
el.style[binding.arg] = binding.value + 'px'
})
const vm = app.mount('#root')
</script>
</body>
</html>
其实核心就是这个 binding 对象啦:
app.directive('position', (el, binding) => {
el.style[binding.arg] = binding.value + 'px'
})
小结
- 自定义指令 directive 结合生命周期函数可是实现代码的复用
- 分为全局指令 app.directive( ) 和局部指令 directives: xxx 的形式
- 自定义开发即是对传输的 el 进行操作, 也可以通过 binding 对象进行传参 arg
vue3 基础-自定义指令 directive的更多相关文章
- 使用 vue3 的自定义指令给 element-plus 的 el-dialog 增加拖拽功能
element-plus 提供的 el-dialog 对话框功能非常强大,只是美中不足不能通过拖拽的方式改变位置,有点小遗憾,那么怎么办呢?我们可以通过 vue 的自定义指令来实现一个可以拖拽的对话框 ...
- vue3+TS 自定义指令：长按触发绑定的函数
vue3+TS 自定义指令:长按触发绑定的函数 而然间看到一个在vue2中写的长按触发事件的自定义指定,想着能不能把他copy到我的vue3项目中呢. 编写自定义指令时遇到的几个难点 1.自定义指令的 ...
- angularjs - 自定义指令(directive)
自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...
- vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
- 自定义指令directive基础用法
官方链接:http://doc.vue-js.com/v2/guide/custom-directive.html#simplest-directive-example 在main.js中注册自定义指 ...
- vue3.0自定义指令（drectives)
在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能 ...
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
随机推荐
- HTML骨架简述
<!DOCTYPE html><!-- <!声明 DOC docment文件/文档 TYPE 类别/类型 告知浏览器当前文档为html> --><html&g ...
- kubesphere应用系列(一)部署NET8API
一.准备工作 1.kubesphere 2.harbor 3.net8 二.创建API应用 1.创建api应用 1.1使用命令创建应用 dotnet new webapi -n YourApiAppN ...
- PKUWC2025 游记
哈哈哈哈哈,我糖完了,哈哈哈哈哈. Day \(-998244353\) 被波波抓到机房充军集训去了,听到了很多新奇的算法,然后拼尽全力仍难以 \(AC\)--然后被各种巨佬疯狂单调队列. Day \ ...
- 解决 Docker 容器镜像拉取难题：全面指南
一.引言 在使用 Docker 容器的过程中,经常会遇到镜像拉取慢甚至无法下载的问题,这给开发和部署工作带来了不小的困扰.本文将深入探讨这一问题的原因,并提供多种有效的解决方案. 二.问题原因分析 网 ...
- 微软正式发布.NET 10 Preview 1：开启下一代开发框架新篇章
2025年2月25日,.NET团队在博客上宣布了.NET 10 Preview 1的正式发布,文章参见:https://devblogs.microsoft.com/dotnet/dotnet-10- ...
- 基于Microsoft.Extensions.AI核心库实现RAG应用
大家好,我是Edison. 之前我们了解 Microsoft.Extensions.AI 和 Microsoft.Extensions.VectorData 两个重要的AI应用核心库.基于对他们的了解 ...
- python xlrd 读取表格 单元格值被覆盖
代码实现顺序: 按行读取 按列读取 满足if条件 单元格值赋值给字典 实现代码: datas = []# 定义一个空列表 for i in range (3,nrows): sheet_data={} ...
- dotnet 源代码生成器分析器入门
本文将带领大家入门 dotnet 的 SourceGenerator 源代码生成器技术,期待大家阅读完本文能够看懂理解和编写源代码生成器和分析器 恭喜你看到了本文,进入到 C# dotnet 的深水区 ...
- 接口介绍以及定义和使用--java进阶day02
1.接口介绍 日常生活中有很多接口,比如手机数据线的接口和手机充电器的接口 我们转换视角,站在设计者的角度思考接口,接口体现出规则,手机的接口大小和数据线的接口大小必须一致,各种接口的大小都要一致,都 ...
- ASP.NET 简单实现数字时钟
每隔1000毫秒(1s)获取一次当前时间 <asp:ScriptManager ID="ScriptManager_Time" runat="server" ...