vue 自定义指令

一、什么是指令

在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统，我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

常见的vue内置指令有：v-if，v-show，v-for，v-bind，v-model 等。

二、如何实现一个自定义指定

Vue的指令以v-开头，作用在HTML元素上，将指令绑定在元素上，给绑定的元素添加一些特殊行为。以 v-if 为例，其中，v- 是Vue的标识，if是指令 ID。

Vue自定义指令有全局注册和局部注册两种方式：全局指令注册和局部指令注册。

1.全局指令注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
 
 
<!-- 当页面加载时，该元素将获得焦点 -->
<input v-focus />

2.局部指令注册

// 注册一个局部自定义指令 `v-focus`
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
 
<!-- 当页面加载时，该元素将获得焦点 -->
<input v-focus />

3.自定义指令钩子函数如下：

4.钩子函数示例：

Vue.directive('my-directive', {
  bind: function(el, binding) {
    // 指令绑定时执行的操作
  },
  inserted: function(el, binding) {
    // 元素插入父节点时执行的操作
  },
  update: function(el, binding) {
    // 指令所在模板更新时执行的操作
  },
  componentUpdated: function(el, binding) {
    // 模板完成一次更新周期时执行的操作
  },
  unbind: function(el, binding) {
    // 指令与元素解绑时执行的操作
  }
})

三、应用场景

四、演示

1.通过指令，指定输入框文字颜色

<! -- 通过指令，指定输入框文字颜色-->
<input v-color="'red'">
 
Vue.directive('color', {
  bind: function (el,bind) {
    // 设置文字颜色
    el.style.color = bind.value
  }
})

2.通过指令，对手机号进行脱敏

<!-- 通过指令，设置手机号脱敏 -->
<div v-mask-phone="'13612345678'"></div>
 
 
// 在Vue实例中注册自定义指令，并在钩子函数中对手机号进行脱敏处理
Vue.directive('mask-phone', {
  bind: function (el, binding) {
    // 获取手机号
    const phoneNumber = binding.value
 
    // 脱敏处理
    const maskedPhoneNumber = phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
 
    // 更新元素的内容
    el.textContent = '手机号码：' + maskedPhoneNumber
  }
})