Vue自定义指令详解


Posted in Javascript onJuly 28, 2017

在 AngularJs 中,它的指令使用 directive ( name,factor_function)来实现:

angular.module( 'myapp' ,[])
.directive (myDirective,function (){
    return{
      template : '',
      restrict: '',
      replace: '',
      ........
    }
})

除了内置指令,Vue.js 也允许组件自定义指令。
+ 自定义指令提供一种机制将数据的变化映射为 DOM 行为
+ Vue.js 用 directive ( id,definition) 方法注册一个全局的自定义指令
+ 自定义的指令接受两个参数: 指令 ID 与定义对象
+ 也可以用组件的 directives 注册一个局部自定义指令 (此方法相当于 AngularJs restrict 属性为A)

1. 钩子函数

+ 钩子函数是 Windows 消息处理机制的一部分
+ 通过设置“钩子”,应用程序可以在系统级对所有消息、事件进行过滤,访问在正常情况下无法访问的消息。
+ 钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统。
+ Windows 的钩子函数可以认为是 Windows 的主要特性之一。利用它们,您可以捕捉您自己进程或其它进程发生的事件。
+ 通过“钩挂”,您可以给 Windows 一个处理或过滤事件的回调函数,该函数也叫做“钩子函数”,当每次发生您感兴趣的事件时,WINDOWS 都将调用该函数。

angularjs 提供了两个函数: compile 和 link ,其中编译函数主要负责将作用域和 DOM 进行链接;链接函数用来创建可以操作 DOM 的指令

注意: compile 和 link 是互斥的,入如果同时设置这两个选项,则会把 compile 返回函数当做 link 函数,而忽略 link 选项本身
Vue.js 同样也提供了几个钩子函数都是可选的,相互之间没有制约关系

钩子函数:主要负责将作用域和 DOM 进行链接;链接函数用来创建可以操作 DOM 的指令

+ bind — 只调用一次,在指令第一次绑定到元素上的时候调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

inserted — 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)

update — 在 bind 之后立即以初始值为参数第一次调用,之后每当被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新,参数为新值与旧值。

componentUpdated — 被绑定元素所在模板完成一次更新周期时调用

unbind — 只调用一次,在指令从元素上解绑时调用

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

在注册之后,便可以在 Vue.js 模板中这样写(记得添加前缀 v-):

<div v-my-directive = 'someValue'></div>

当只需要 update 函数时,可以传入函数替代定义对象:

Vue.directive( 'my-directive',function (value) {
  // 这个函数作用 update()
})

2. 指令实例属性

所有钩子函数都将被赋值到实际的指令对象中,在钩子内 this 指向这个指令对象。
这个对象暴露了一些有用的属性:
钩子函数的参数:

el — 指令绑定的元素,可以用来直接操作 DOM 。

binding — 一个对象,包含以下属性:
name — 指令的名字,不包含前缀
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 }。
vm — 拥有该指令上下文 ViemModel
vnode — Vue 编译生成的虚拟节点。

oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

desciiptor — 一个对象,包含指令的解析结果

注意:我们应当将这些属性视为只读,不要修改它们,我们也可以给指令对象添加自定义属性,但是注意不要覆盖已有的内部属性

下面将讲解一个简单的例子,当页面加载时,input输入框将自动聚焦。
代码如下:

//注册一个全局自定义指令v-focus
// 当绑定元素插入到DOM中
// 聚焦元素
 <div id="app">
   <input v-focus>
 /div>

Vue.directive('focus', {
  inserted: function (el) {
    el.focus() }
  });

 var app = new Vue({
        el: '#app'
      });

下面将讲解一个使用钩子函数参数的例子,将元素的字体色设置为 #fff,将背景色设置为传入指令的参数 red,并将指令名指令绑定值,指令绑定值的表达式,传入指令的参数显示在中。

代码如下:

<div id="example" v-demo-directive:red="message"></div>

<script>
  Vue.directive('demoDirective', {
    bind: function(el, binding, vnode){
      el.style.color = '#fff'
      el.style.backgroundColor = binding.arg
      el.innerHTML = 
       '指令名 name:' + binding.name + '<br>' +
       '指令绑定值 value:' + binding.value + '<br>' +
       '指令绑定表达式expression:' + binding.expression + '<br>' +
       '传入指令的参数argument - '  + binding.arg + '<br>'
      },
    });
    var demo = new Vue({
      el: '#example',
      data: {
        message: 'hello!'
      }
    })
    </script>

3. 对象字面量

+ 如果指令需要多个值,则可以传入一个 javascript 对象字面量
+ 指令可以使用任意合法的 javascript 表达式

<div id="app" v-demo-directive="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demoDirective', function(el, binding, vnode){
    console.log(binding.value.color);
    console.log(binding.value.text);
  });

var demo = new Vue({
    el: '#app'
  })

4. 字面指令

+ 当指令使用了字面修饰符时,它的值将按普通字符串处理并传递给 update 方法
+ update 方法将只调用一次,因为普通字符串不能影响数据变化
+ 若在创建自定义指令时,设置 inListerral: true 则特性值将被视作字符串,并将赋值给该指令的expression,字面指令不会建立数据监视。

div id="isExample" v-myEx.literal = 'foo bar baz'></div>

Vue.directive('myEx',function(el, binding, vnode){
  console.log(binding.value.literal)
})

var hah = new Vue({
  el: '#isExample'
})

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

Javascript 相关文章推荐
js onload处理html页面加载之后的事件
Oct 30 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 #Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 #Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 #Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 #Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 #jQuery
完美实现js拖拽效果 return false用法详解
Jul 28 #Javascript
webpack 2的react开发配置实例代码
Jul 28 #Javascript
You might like
php strnatcmp()函数的用法总结
2013/11/27 PHP
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
python通过线程实现定时器timer的方法
2015/03/16 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
keras实现多种分类网络的方式
2020/06/11 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
某个公司的Java笔面试题
2016/03/11 面试题
超市促销实习自我鉴定
2013/09/23 职场文书
建筑工程自我鉴定
2013/10/18 职场文书
文言文形式的学生求职信
2013/12/03 职场文书
三年级音乐教学反思
2014/01/28 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
雷锋的故事观后感
2015/06/10 职场文书
领导欢送会主持词
2015/07/06 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA