Vue自定义指令使用方法详解


Posted in Javascript onAugust 21, 2017

Vue自定义指令的使用,具体内容如下

1.自定义指令的语法

Vue自定义指令语法如下:

Vue.directive(id, definition)

传入的两个参数,id是指指令ID,definition是指定义对象。其中,定义对象可以提供一些钩子函数

2.钩子函数

定义对象的钩子函数如下:

Vue自定义指令使用方法详解

钩子函数的参数

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 钩子中可用。

3.例子

Vue自定义指令常见使用例子如下:

Vue.directive('my-directive', {
 bind: function(){
 //做绑定的准备工作
 //比如添加事件监听器,或是其他只需要执行一次的复杂操作
 },
 inserted: function(){
 //...
 },
 update: function(){
 //根据获得的新值执行对应的更新
 //对于初始值也会调用一次
 },
 componentUpdated: function(){
 //...
 },
 unbind: function(){
 //做清理操作
 //比如移除bind时绑定的事件监听器
 }

当指令的定义对象中只使用update时,只需直接传入函数即可,如下:

Vue.directive('my-directive', function(){
 //...
})

4.应用

我们往往自定义指令都是定义到全局,方式如下:

第一步:建立一个全局的命令文件例如:directive/directives.js.

第二步:利用Vue.directive()建立一个全局命令,并将它暴露出来,例如一个focus 让表单自动聚焦.

directives.js

import Vue from 'vue';
Vue.directive('focus',{
 //当绑定元素插入到DOM中
 inserted: function(el){
  el.focus(); //元素聚焦
  el.setAttribute('placeholder','自定义内容');
 }
})
Vue.directive('***',{
 inserted: function(el){
  //....
 }
})

export {Vue}

第三步:在main.js(入口JS文件)中将它引入,可以省略文件后缀.

main.js

import directive from './components/global/directives';

这样任何一个Vue文件只要这样v-focus(命令名),就可以很方便的用到了

<el-input v-model="input" placeholder="" v-focus></el-input>

如果指令需要传值或者多个值

<body id="example">
 <div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div>
</body>
<script>
 Vue.directive('demo',function(value){
  console.info(value.color); //white
  console.info(value.text) // hello!
 })
 var demo = new Vue({
  el : '#demo'
 })
</script>
----------

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
Javascript 日期对象Date扩展方法
May 30 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
分页栏的web标准实现
Nov 01 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 #Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 #Javascript
JavaScript中各数制转换全面总结
Aug 21 #Javascript
JQuery判断正整数整理小结
Aug 21 #jQuery
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 #Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 #Javascript
Node.js简单入门前传
Aug 21 #Javascript
You might like
PHP 采集程序 常用函数
2008/12/18 PHP
第四章 php数学运算
2011/12/30 PHP
php测试kafka项目示例
2020/02/06 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
用Python抢过年的火车票附源码
2015/12/07 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
转预备党员政审材料
2014/02/06 职场文书
英语系本科生求职信
2014/07/15 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
css3 文字断裂效果
2022/04/22 HTML / CSS