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

Posted 2022-02-12 yaogengzhu

自定义指令

注册全局的自定义指令
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-