详解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+iview实现文件上传
Nov 17 Vue.js
springboot+vue实现文件上传下载
Nov 17 Vue.js
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
vue使用watch监听属性变化
Apr 30 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
使用js判断控件是否获得焦点
2014/01/03 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
python发送HTTP请求的方法小结
2015/07/08 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
经济系大学生求职信
2013/10/01 职场文书
自我评价格式
2014/01/06 职场文书
迎新晚会邀请函
2014/02/01 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
老员工辞职信范文
2015/05/12 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
长江七号观后感
2015/06/11 职场文书
同意转租证明
2015/06/24 职场文书
员工升职自我评价
2019/03/26 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书