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 相关文章推荐
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP会话控制实例分析
2016/12/24 PHP
jquery得到font-size属性值实现代码
2013/09/30 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
基于python实现KNN分类算法
2020/04/23 Python
Django实现文件上传下载功能
2019/10/06 Python
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
会计专业自我鉴定范文
2013/12/29 职场文书
网络教育自我鉴定
2014/02/04 职场文书
超市收银员岗位职责
2015/04/07 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
小学运动会宣传稿
2015/07/23 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle