码迷,mamicode.com
首页 > 其他好文 > 详细

快速掌握vue中的自定义指令

时间:2019-06-26 00:51:32      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:strong   名称   绑定   fun   function   函数   传递   code   一个   

自定义指令

注册全局的自定义指令
Vue.directive(),
其中,传递两个参数,第一个参数传递的是指令的名字,第二个参数是一个对象。

详细的例子

// 第一个参数是指令的名称,第二个参数是一个对象。
Vue.directive('focus', {
  bind: function (el) {
    // 注意:每个函数中呢,第一个参数永远是el, 表示被绑定了指令的那个元素,这个el参数,是一个原生的js对象
    el.focus()
  },
  // 在元素刚绑定指令的时候,元素还没有放到dom中去,这个时候,调用focus方法没有作用
  // 因为一个元素只有插入dom之后,才能获取焦点
  inserted: function (el) {
    el.focus()
  },
})

对象,我们介绍三个方法

bind:

每当指令绑定到元素上的时候,会立即执行bind函数,只执行一次

inserted

表示元素插入到dom中的时候,会执行inserted函数

updated

当window更新的时候,会执行updated,可能会触发多次。

总结 在使用的时候,需要给指令前加一个v-

快速掌握vue中的自定义指令

标签:strong   名称   绑定   fun   function   函数   传递   code   一个   

原文地址:https://www.cnblogs.com/yaogengzhu/p/11087396.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!