首页 > 其他 > 详细

Vue2.0笔记——自定义指令

时间:2018-04-20 23:26:13      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:Vue

自定义指令

自定义指令主要用于,除系统提供外,自己对DOM的底层操作。
例如当页面加载时需要将一个文本框为自动获得焦点。只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。

我们通过全局自定义指令和局部自定义指令来讲解autofouce案例。

全局自定义指令

在全局API中通过Vue.directive( id, [definition] )来注册或获取全局指令。
参数:

  • id表示自定义的指令名称
  • definition为自定义指令的定义,一般可以含有几个生命周期钩子函数
  • bind() 指令第一次绑定到元素上时调用,且只调用一次,可执行初始化操作
  • inserted() 被绑定元素插入到DOM时调用
  • update() 被绑定元素所在模板更新时调用
  • componentUpdated() 被绑定元素所在模板完成一次更新周期时调用
  • unbind() 指令与元素解绑时调用,只调用一次

bind与inserted在加载页面初始化实例并挂载之后调用
update,componentUpdated 当指令所绑定的元素模板更新时调用
unbind解绑时调用

语法:

// 注册
Vue.directive(‘my-directive‘, {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive(‘my-directive‘, function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter,返回已注册的指令
var myDirective = Vue.directive(‘my-directive‘)

示例:

//el参数为绑定的元素,自动载入
Vue.directive(‘focus‘,{
    inserted:function(el){
        console.log(el);
        el.focus();
    }
});

<div id="app">
    <input type="text" v-focus>
</div>

2.当然,你也可以使用简单的指令函数。

// 注册 (指令函数)
Vue.directive(‘my-directive‘, function () {
  // 这里将会被 `bind` 和 `update` 调用
})

3.我们可以在bind函数中为其添加两个参数,第一个是绑定的元素,第二个是当前自定义指令对象。

Vue.directive(‘focus‘,{
    bind(el,binding){
        console.log(binding);
    }
});

局部,实例的自定义指令

局部的自定义指令定义在directives选项中,所配置的数据与全局的完全一样。

directives:{
    focus:{
        inserted(el){ //当被绑定元素插入到DOM的时候,进行自动获焦
        el.focus();
    }
}

focus即为指令名称,使用时直接,v-focus即可。

el参数和binding参数,获得绑定元素与当前指令对象只有在bind函数绑定之后才能得到值。所以inserted,update也是可以的。

Vue2.0笔记——自定义指令

标签:Vue

原文:http://blog.51cto.com/zouzhelu/2105982

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号