vue自定义指令

46. vue自定义指令

在Vue中，我们可以使用Vue.directive方法创建自定义指令，并在需要时在模板中使用这些指令。

下面是一个简单的自定义指令示例：

// 注册一个全局自定义指令 `v-uppercase`
Vue.directive('uppercase', {
   
  // 当被绑定的元素插入到 DOM 中时
  inserted: function (el) {
   
    el.textContent = el.textContent.toUpperCase()
  }
})

在上面的示例中，我们使用Vue.directive方法创建了一个名为v-uppercase的自定义指令，并在定义对象中添加了一个inserted钩子函数。当指令应用于一个元素时，这个钩子函数将被调用。在这个例子中，我们在这个钩子函数中将元素的文本内容转换成大写字母。

接下来，我们可以在模板中使用v-uppercase指令来应用这个自定义指令：

<p v-uppercase>This text will be transformed to uppercase.</p>

在上面的示例中，我们将v-uppercase指令应用到了一个<p>元素上，这样当这个元素被插入到DOM中时，自定义指令中的inserted函数将被调用，并将元素的文本内容转换成大写字母。

除了inserted钩子函数外，自定义指令还可以包含其他钩子函数，比如bind、update、componentUpdated和unbind等，这些钩子函数可以用于在不同的生命周期阶段对指令进行操作。

自定义指令可以在组件内部和全局范围内进行注册。要在组件内部注册指令，可以在组件定义中添加directives属性，如下所示：

Vue.component('my-component', {
   
  directives: {
   
    // 注册一个局部自定义指令 `v-focus`
    focus: {
   
      // 指令定义
      inserted: function (el) {
   
        el.focus()
      }
    }
  },
  template: '<input v-focus>'
})

在上面的示例中，我们在组件定义中添加了一个directives属性，并在这个属性中注册了一个名为v-focus的局部自定义指令。在模板中，我们将这个指令应用到一个<input>元素上，这样当这个元素被插入到DOM中时，自定义指令中的inserted函数将被调用，并将元素设置为聚焦状态。

需要注意的是，指令钩子函数中的this上下文指向的是当前指令的实例对象，可以在钩子函数中通过this访问指令的一些属性和方法。