vue 指令实现

Vue 指令实现

Vue 指令是带有 v- 前缀的特殊特性，用于在 DOM 元素上应用响应式行为。Vue 提供了一些内置指令（如 v-model、v-if），同时也支持自定义指令的注册。

内置指令示例

v-bind 动态绑定属性：

<div v-bind:class="{ active: isActive }"></div>

v-model 实现双向数据绑定：

<input v-model="message" placeholder="edit me">

v-for 渲染列表：

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

自定义指令实现

注册全局自定义指令：

Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
});

注册局部指令（组件内）：

directives: {
  focus: {
    inserted: function (el) {
      el.focus();
    }
  }
}

使用自定义指令：

<input v-focus>

指令钩子函数

自定义指令提供以下钩子（均为可选）：

• bind：指令第一次绑定到元素时调用
• inserted：被绑定元素插入父节点时调用
• update：所在组件 VNode 更新时调用
• componentUpdated：所在组件及子组件 VNode 全部更新后调用
• unbind：指令与元素解绑时调用

动态指令参数

指令参数可以是动态的：

<a v-bind:[attributeName]="url"> ... </a>

当 attributeName 值为 href 时，等价于：

<a v-bind:href="url"> ... </a>

指令修饰符

修饰符是以点开头的特殊后缀：

<form v-on:submit.prevent="onSubmit">...</form>

.prevent 修饰符会调用 event.preventDefault()

函数简写

当需要在 bind 和 update 时触发相同行为时：

Vue.directive('color', function (el, binding) {
  el.style.color = binding.value;
});

对象字面量

指令可以接收任何合法的 JavaScript 表达式：

<div v-demo="{ color: 'white', text: 'hello' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color); // => "white"
  console.log(binding.value.text);  // => "hello"
});