vue2.0自定义指令示例代码详解


Posted in Javascript onApril 25, 2019

1、什么是指令?

指令通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记。

除了 Vue 核心携带着的一些默认指令(v-model 和 v-show)之外,

Vue 还允许你注册自己的自定义指令。某些情况下,还是需要对普通元素进行一些底层 DOM 访问,

这也是自定义指令仍然有其使用场景之处。

2、全局指令:

当页面加载时,元素将获取焦点,事实上,在访问页面时,如果你还没有点击任何地方,上面的输入框现在应该处于获取焦点的状态。现在让我们构建指令以完成此效果:

<template>
<div class="parent">
 <input v-focus>
</div>
</template>
import Vue from 'vue'
 import cnChildren from './children'
 // 注册一个名为 `v-focus` 的全局自定义指令
 Vue.directive('focus', {
  // 当绑定的元素插入到 DOM 时调用此函数……
  inserted: function (el) {
   // 元素调用 focus 获取焦点
   el.focus()
  }
 });

如果你想要注册一个局部指令,也可以通过设置组件的 directives 选项:

directives: {
 focus: {
  // 指令定义对象
  inserted: function (el) {
   el.focus()
  }
 }
}

我们有几个可用的钩子:

bind:在指令第一次绑定到元素时调用,只会调用一次。可以在此钩子函数中,执行一次性的初始化设置。
inserted:在已绑定的元素插入到父节点时调用(只能保证父节点存在,不一定存在于 document 中)。
update:在包含指令的组件的 VNode 更新后调用,但可能之前其子组件已更新。指令的值可能更新或者还没更新,然而可以通过比较绑定的当前值和旧值,来跳过不必要的更新(参考下面的钩子函数)。
componentUpdated:在包含指令的组件的 VNode 更新后调用,并且其子组件的 VNode 已更新。
unbind:在指令从元素上解除绑定时调用,只会调用一次。
每个钩子可以选择一些参数。

el:指令绑定的元素。可以用于直接操作 DOM。

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

1、name:指令的名称,不包括 v- 前缀。
  2、value:向指令传入的值。例如,在 v-my-directive="1 + 1" 中,传入的值是 2。
  3、oldValue:之前的值,只在 update 和 componentUpdated 钩子函数中可用。无论值是否发生变化,都可以使用。
  4、expression:指令绑定的表达式(expression),以字符串格式。例如,在 v-my-directive="1 + 1" 中,表达式是 "1 + 1"。
  5、arg:向指令传入的参数,如果有的话。例如,在 v-my-directive:foo 中,参数是 "foo"。
  6、modifiers:一个对象,包含修饰符,如果有的话。例如,在 v-my-directive.foo.bar 中,修饰符是 { foo: true, bar: true }。
vnode:由 Vue 编译器(Vue's compiler)生成的虚拟 Node 节点(virtual node)。更多细节请查看
VNode API。

除了 el 之外的其他参数,都应该是只读的,并且永远不要去修改它们。

3、自定义指令示例

如果指令需要多个值,你还可以向指令传入 JavaScript 对象字面量(object literal)。记住,指令能够接收所有有效的 JavaScript 表达式。

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

总结

以上所述是小编给大家介绍的vue2.0自定义指令示例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
javascript 写类方式之八
Jul 05 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 #Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 #Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 #Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 #Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 #Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 #Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 #Javascript
You might like
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP 图片处理
2020/09/16 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
python调用java的Webservice示例
2014/03/10 Python
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
进一步探究Python中的正则表达式
2015/04/28 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
python 解压pkl文件的方法
2018/10/25 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
Python flask框架端口失效解决方案
2020/06/04 Python
python切割图片的示例
2020/11/12 Python
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
校园广播稿精选
2014/10/01 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
Python实现照片卡通化
2021/12/06 Python
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis