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属性,来决定这个指令是作为 ...
随机推荐
- Linux - 配置服务器之间SSH免密登录
如果集群中服务器之间没有配置SSH免密,那么SSH访问其他服务器时就需要输入密码 一般都要设置密码强口令,又长又难记,就想配置一下SSH免密. 一.生成公钥和私钥 在ctos79-01执行如下命令,公 ...
- 机器学习 | 强化学习（7） | 融合学习与规划（Integrating Learning and Planning）
7-融合学习与规划(Integrating Learning and Planning) 1.导论 基于模型的强化学习(Model-Based Reinforcement Learning) 在上一个 ...
- 我的公众号接入了DeepSeek-R1模型，成为了一个会深度思考的强大.NET AI智能体！
前言 前不久腾讯元器宣布接入满血版 Deepseek R1 模型,模型免费使用且不限量,为智能体开发提供更多样化的模型选择,带来更丰富的智能体功能和玩法. 今天咱们一起来把我公众号的.NET AI智能 ...
- MySQL索引最左原则：从原理到实战的深度解析
MySQL索引最左原则:从原理到实战的深度解析 一.什么是索引最左原则? 索引最左原则是MySQL复合索引使用的核心规则,简单来说: "当使用复合索引(多列索引)时,查询条件必须从索引的最左 ...
- C语言 链表操作
#include<stdio.h>#include<stdlib.h>struct node{ int data; struct node *next;};int ...
- manim边学边做--向量相关的场景类
VectorScene是Manim动画库中专门用于向量空间可视化的场景类,继承自基础 Scene 类. 它通过封装一系列向量操作方法,使数学教育.物理模拟等领域的动画制作更加高效. 本文主要介绍Vec ...
- 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
FRP 是 Github 上开源的一款内网穿透工具,点击前往项目地址,该项目分为 frps 服务端和 frpc 客户端,通过在拥有公网 IP 的服务器上搭建服务端,然后在被穿透的机器上安装客户端,配置 ...
- CentOS——磁盘分区
Centos7-磁盘分区磁盘层次结构–磁盘分区方法情况一:磁盘分区–磁盘小于2T fdisk情况二:磁盘分区–磁盘大于2T centos6:parted centos7:fdisk一.磁盘小于2T情况 ...
- Docker创建Docker Swarm集群节点
预置条件一.配置防火墙CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙.1.关闭firewall:systemctl stop firewalld.servi ...
- 搭建docker swarm集群实现负载均衡
Swarm简介:Swarm是Docker官方提供的一款集群管理工具,其主要作用是把若干台Docker主机抽象为一个整体,并且通过一个入口统一管理这些Docker主机上的各种Docker资源.Swarm ...