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属性,来决定这个指令是作为 ...
随机推荐
- 发那科焊接机器人M-10iA维修总结
发那科作为工业机器人制造商,其焊接机器人产品广泛应用于各种工业领域.然而,随着时间的推移,焊接机器人可能会出现故障,因此了解发那科焊接机器人M-10iA维修知识显得尤为重要. 一.日常法那科机械手维护 ...
- hbase - [05] hbase关联hive
一.配置 1.在hive的配置文件中配置HBASE_HOME(conf/hive-env.sh) export HBASE_HOME=/opt/module/hbase 2.将 conf/hive-e ...
- 补充：基于项目的协同过滤推荐算法(Item-Based Collaborative Filtering Recommendation Algorithms)
前言 继续上篇博客,继续读论文. 想看上篇论文的同学可以点击这里 相关工作 In this section we briefly present some of the research litera ...
- 【Abaqus】材料行为的非均匀空间分布
设想一种情况:在有限元分析中,一个区域或者整个网格中,每个单元的材料行为都是单独的.这时在ABAQUS中应该如何设置? 两种办法: 给每个单元创建一个集合,然后一一赋予SECTION. 使用*Dist ...
- goframe API 自定义接口返回值处理
前言 goframe 默认使用了中间键 ghttp.MiddlewareHandlerResponse, HTTP Server 的数据返回通过 ghttp.Response 对象实现,ghttp.R ...
- php使用redis锁
redis加锁分类 redis能用的的加锁命令分别是INCR.SETNX.SET 利用predis操作redis方法大全 第一种锁命令INCR 这种加锁的思路是, 当 key 不存在,那么 key 的 ...
- 编写你的第一个 Django 应用程序，第3部分
本教程从教程 2 停止的地方开始.我们是 继续网络投票应用程序,并将专注于创建公众界面 – "视图". 在我们的投票应用程序中,我们将有以下四个视图: 问题"索引&quo ...
- 编写你的第一个 Django 应用程序，第2部分
接着上次第1部分开始,现在我们将设置数据库,创建您的第一个模型,并快速获得 介绍 Django 自动生成的管理站点. 一.数据库设置 现在,打开.这是一个普通的 Python 模块,具有 表示 Dja ...
- MFC非模态对话框的关闭
如果要在点击按钮的情况下,销毁非模态对话框,只需要把按钮的事件映射到OnCancel函数, 里面调用DestroyWindow(), 然后重写PostNCDestroy(), delete 指针. 另 ...
- 必须添加对程序集"System.Core"的引用
异常波浪线 解决办法 <system.web> <compilation> <assemblies> <add assembly="System.C ...