Vue.js自定义指令学习使用详解


Posted in Javascript onOctober 19, 2019

自定义指令

自定义指令的注册方法和组件很像,也分全局注册和局部注册,比如注册一个v-focus指令用于在<input>、<textarea>元素初始化时自动获得焦点,共有两种写法:

//全局注册
Vue.directive('focus',{
 //指令选项
});


//局部注册
var app = new Vue({
 el: '#app',
 directive: {
 focus: {
 //指令选项
 }
 }
});

自定义指令的选项是由几个钩子函数组成的,每个都是可选的。

自定义指令的各个选项如下:

  • bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
  • inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必在于document中)。
  • update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
  • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  • unbind: 只调用一次,指令与元素解绑时调用。

可以根据需求在不同的钩子函数内完成逻辑代码,例如上面的v-focus,我们希望在元素插入父节点时就调用,那用到的最好是inserted。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <title>自定义指令</title>
</head>
<body>
 <div id="app">
 <input type="text" v-focus>
 </div>
 <script>
 Vue.directive('focus',{
  inserted: function (el) {
  //聚焦元素
  el.focus();
  }
 });

 var app = new Vue({
  el: '#app'
 });
 </script>
</body>
</html>

Vue.js自定义指令学习使用详解

每个钩子函数都有几个参数可用,具体如下:

  • el: 指令所绑定的元素,可以用来直接操作DOM
  • binding: 一个对象,包含以下属性:

    name:指令名,不包括v-前缀
    valule:指令的绑定值,例如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钩子中可用。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <title>自定义指令</title>
</head>
<body>
 <div id="app">
 <div v-test:msg.a.b="message"></div>
 </div>
 <script>
 Vue.directive('test',{
  bind: function (el, binding, vnode) {
  var keys = [];
  for(var i in vnode){
   keys.push(i);
  }
  el.innerHTML = 
   'name:' + binding.name + '<br/>' +
   'value:' + binding.value + '<br/>' +
   'expression:' + binding.expression + '<br/>' +
   'argument:' + binding.arg + '<br/>' + 
   'modifiers:' + JSON.stringify(binding.modifiers) + '<br/>' + 
   'vnode keys' + keys.join(',');
  }
 });

 var app = new Vue({
  el: '#app',
  data: {
  message: 'some text'
  }
 });
 </script>
</body>
</html>

Vue.js自定义指令学习使用详解

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

Javascript 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
js Dialog 实践分享
Oct 22 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
js实现时分秒倒计时
Dec 03 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
Vue.js标签页组件使用方法详解
Oct 19 #Javascript
基于JavaScript获取base64图片大小
Oct 18 #Javascript
react MPA 多页配置详解
Oct 18 #Javascript
vue滚动插件better-scroll使用详解
Oct 18 #Javascript
VUE实现密码验证与提示功能
Oct 18 #Javascript
VUE实现图片验证码功能
Nov 18 #Javascript
countUp.js实现数字滚动效果
Oct 18 #Javascript
You might like
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP实现多条件查询实例代码
2010/07/17 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
JS 实现Json查询的方法实例
2013/04/12 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
为什么说python适合写爬虫
2020/06/11 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
python switch 实现多分支选择功能
2020/12/21 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
技术合作协议书范本
2014/04/18 职场文书
优质服务活动实施方案
2014/05/02 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
小学推普周活动总结
2015/05/07 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
python周期任务调度工具Schedule使用详解
2021/11/23 Python
Go归并排序算法的实现方法
2022/04/06 Golang