Vue自定义指令详解

网络编程 JavaScript javascript类库 vue.js 分类:[default] 更新日期: 2017-01-19
这篇文章主要为大家详细介绍了Vue自定义指令的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在 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 >
   <input v-focus>
 /div>

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

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

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

代码如下:

 <div  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  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  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'
})

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • Yii2rbac权限控制之rule教程详解
    Yii2rbac权限控制之rule教程详解
    这篇文章主要介绍了Yii2 rbac权限控制之rule教程详解的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下在我们之前Yii2搭建后台并实现rbac权限控制完整实例教程中,不知道你曾经疑惑过没有一个问题,rule表是做什么的,为什么在整个过程中我们都没有涉及到这张表? 相信我不说,部分人也都会去尝试,或百度或google,到头来也会竹篮打水,这部 ...
  • 详解表单验证正则表达式实例(推荐)
    这篇文章主要介绍了详解表单验证正则表达式实例推荐的相关资料,非常不错,具有参考借鉴价值,特此分享到平台供大家参考验证:!reg.test(value) 邮箱: 代码如下:reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/i; 不包含中文: 代码如下:r ...
  • PHP微信开发之查询微信精选文章
    这篇文章主要为大家详细介绍了PHP微信开发之简单实现查询微信精选文章的相关资料,感兴趣的小伙伴们可以参考一下查询微信里的一些精选的,点击量比较大的文章. 别忘记申请apikey(登录百度账号即可获取),要完成的功能是: 1.用户回复"文章",公众号要返回文章分类的编号(比如9.科技). 2.用户回复wz9,1,腾讯     则能返回科技类 ...
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之打造清新分页Helper三
    利用ASP.NETMVC+Bootstrap搭建个人博客之打造清新分页Helper三
    这篇文章主要介绍了利用ASP.NET MVC+Bootstrap搭建个人博客之打造清新分页Helper三的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下0. 没有找到一款中意的分页插件,又不想使用现成的(丑到爆),所以自己动手造一个吧 先看下效果(其实也不咋滴...): 我的小站地址:我的Bootstrap小站; PS:(问博客园:为什么老是删我 ...
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
    这篇文章主要介绍了利用ASP.NET和MVC+Bootstrap搭建个人博客之praise.js点赞特效插件二的相关资料,需要的朋友可以参考下在上篇文章给大家介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一).接下来给大家介绍如果做个点赞插件,一起通过本文学习吧! 1. 为啥要做这个点赞插件?    praise.js是一款小 ...
  • 利用ASP.NETMVC和Bootstrap快速搭建响应式个人博客站(一)
    利用ASP.NETMVC和Bootstrap快速搭建响应式个人博客站(一)
    这篇文章主要介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站一的相关资料,需要的朋友可以参考下1.0 为什么要做这个博客站? 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效. ...
猜你喜欢