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 相关文章推荐
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
seajs下require书写约定实例分析
May 16 Javascript
element-ui 关于获取select 的label值方法
Aug 24 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
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
Prototype Function对象 学习
2009/07/12 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
angularjs基础教程
2014/12/25 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
python ip正则式
2009/05/07 Python
学习python的几条建议分享
2013/02/10 Python
python标准日志模块logging的使用方法
2013/11/01 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
python时间日期操作方法实例小结
2020/02/06 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Python super()方法原理详解
2020/03/31 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
python map比for循环快在哪
2020/09/21 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
大学本科生的个人自我评价
2013/12/09 职场文书
打架检讨书300字
2014/02/02 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
就业协议书的作用
2014/04/11 职场文书
初中生操行评语大全
2014/04/24 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书