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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
vue中实现高德定位功能
Dec 03 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
JavaScript中isPrototypeOf函数
Nov 07 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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
PHP编实现程动态图像的创建代码
2008/09/28 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP微信支付实例解析
2016/07/22 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
经验几则 推荐
2006/09/05 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
探讨Vue.js的组件和模板
2017/10/27 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
python中的一些类型转换函数小结
2013/02/10 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
策划主管的工作职责
2013/11/24 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
民事起诉书范本
2015/05/19 职场文书
关于教师节的广播稿
2015/08/19 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python