详解Vue中的自定义指令


Posted in Vue.js onDecember 07, 2020

除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。在Vue里,代码复用的主要形式和抽象是组件。然而,有的情况下,仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。本文将详细介绍Vue自定义指令

指令注册

以一个input元素自动获得焦点为例,当页面加载时,使用autofocus可以让元素将获得焦点 。但是autofocus在移动版Safari上不工作。现在注册一个使元素自动获取焦点的指令

指令注册类似于组件注册,包括全局指令和局部指令两种

【全局指令】

使用Vue.diretive()来全局注册指令

// 注册一个全局自定义指令 v-focusVue.directive('focus', { // 当绑定元素插入到 DOM 中。
 inserted: function (el) {  // 聚焦元素  el.focus()
 }
})

【局部指令】

也可以注册局部指令,组件或Vue构造函数中接受一个 directives 的选项

var vm = new Vue({
 el: '#example',
 directives:{
  focus:{
   inserted: function (el) {
    el.focus()
   }   
  }
 }
})

然后可以在模板中任何元素上使用新的 v-focus 属性

<p id="example">
 <input v-focus></p>
<script>// 注册一个全局自定义指令 v-focusVue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) {  // 聚焦元素  el.focus()
 }
})var vm = new Vue({
 el: '#example',
})</script>

详解Vue中的自定义指令

钩子函数

指令定义函数提供了几个钩子函数(可选)

【bind】

只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

【inserted】

被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)

【update】

所在组件的 VNode 更新时调用,但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新

【componentUpdated】

所在组件的 VNode 及其孩子的 VNode 全部更新时调用

【unbind】

只调用一次, 指令与元素解绑时调用

钩子函数参数

钩子函数被赋予了以下参数

【el】

指令所绑定的元素,可以用来直接操作 DOM

【binding】

一个对象,包含以下属性:

name: 指令名,不包括 v- 前缀。
value: 指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

【vnode】

Vue 编译生成的虚拟节点

【oldVnode】

上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用

[注意]除了 el 之外,其它参数都是只读的,尽量不要修改他们。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行

下面是一个使用了这些参数的自定义钩子样例

<p id="example" v-demo:foo.a.b="message"></p>
<script>Vue.directive('demo', {
 bind: function (el, binding, vnode) {  var s = JSON.stringify
  el.innerHTML =
   'name: '    + s(binding.name) + '<br>' +
   'value: '   + s(binding.value) + '<br>' +
   'expression: ' + s(binding.expression) + '<br>' +
   'argument: '  + s(binding.arg) + '<br>' +
   'modifiers: ' + s(binding.modifiers) + '<br>' +
   'vnode keys: ' + Object.keys(vnode).join(', ')
 }
})new Vue({
 el: '#example',
 data: {
  message: 'hello!'
 }
})</script>

详解Vue中的自定义指令

【函数简写】

大多数情况下,可能想在bind和update钩子上做重复动作,并且不想关心其它的钩子函数。可以这样写:

Vue.directive('color-swatch', function (el, binding) {
 el.style.backgroundColor = binding.value
})

【对象字面量】

如果指令需要多个值,可以传入一个JS对象字面量。指令函数能够接受所有合法类型的JS表达式

<p v-demo="{ color: 'white', text: 'hello!' }"></p>
Vue.directive('demo', function (el, binding) {
 console.log(binding.value.color) // => "white"
 console.log(binding.value.text) // => "hello!"
})

以上就是详解Vue中的自定义指令的详细内容,更多关于vue 自定义指令的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue实现登录功能
Dec 31 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
vue-router定义元信息meta操作
Dec 07 #Vue.js
Vue如何实现验证码输入交互
Dec 07 #Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 #Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 #Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 #Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 #Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 #Vue.js
You might like
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
python中的格式化输出用法总结
2016/07/28 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
介绍一下XMLHttpRequest对象
2012/02/12 面试题
机电专业体育教师求职信
2013/09/21 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
十八大演讲稿
2014/05/22 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
迟到检讨书范文
2015/01/27 职场文书
永远是春天观后感
2015/06/12 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
redis protocol通信协议及使用详解
2022/07/15 Redis