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入门教程(2) JS基础知识
Jan 31 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
js与applet相互调用的方法
Jun 22 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
vue 使用原生组件上传图片的实例
Sep 08 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
第一节--面向对象编程
2006/11/16 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
PHP编程风格规范分享
2014/01/15 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
javascript知识点收藏
2007/02/22 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
js性能优化技巧
2015/11/29 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
Python的Django框架使用入门指引
2015/04/15 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
如何查找网页漏洞
2016/06/22 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
银行竞聘报告范文
2014/11/06 职场文书
525心理健康活动总结
2015/05/08 职场文书
辞职离别感言
2015/08/04 职场文书
安全生产协议书
2016/03/22 职场文书
Redis+AOP+自定义注解实现限流
2022/06/28 Redis