指令

在 Vue 中，指令是一种特殊的指令，用于为 DOM 元素添加特殊功能。Vue 提供了一些内置指令，例如 v-if、v-for、v-bind 和 v-on，同时也允许开发人员创建自定义指令。

内置指令

Vue 提供了一些内置指令，用于实现常见的功能。

v-if 和 v-show

v-if 指令用于根据条件显示或隐藏元素，它会根据表达式的值来判断元素是否显示。v-show 指令也用于显示或隐藏元素，但是它只是通过 CSS 的 display 属性来控制元素的显示和隐藏，而不是从 DOM 中删除或添加元素。

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div v-if="show">Hello, world!</div>
    <div v-show="show">Hello, world!</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    }
  },
}
</script>

当用户单击 Toggle 按钮时，show 的值将会翻转。v-if 指令将根据 show 的值来决定是否渲染 div 元素，而 v-show 指令将根据 show 的值来控制 div 元素的 display 属性。

v-for

v-for 指令用于循环渲染一组元素。它需要一个数组作为参数，并使用类似于 JavaScript 的 for 循环来迭代数组中的每个元素。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    }
  },
}
</script>

v-for 指令将会循环渲染 items 数组中的每个元素，并为每个 li 元素添加一个唯一的 key 属性。

v-bind

v-bind 指令用于将 Vue 实例中的数据绑定到 HTML 属性或 DOM 属性上。它需要一个表达式作为参数，表达式可以是一个变量、一个计算属性或一个方法调用。

<template>
  <div>
    <input type="text" :value="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!',
    }
  },
}
</script>

v-bind 指令将 Vue 实例中的 message 属性绑定到 input 元素的 value 属性上。

v-on

v-on 指令用于将事件绑定到 Vue 实例上的方法或计算属性上。它需要一个事件类型和一个方法或计算属性作为参数。

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    increment() {
      this.count++
    },
  },
}
</script>

@click 指令将会将 increment 方法绑定到 button 元素的 click 事件上。当用户单击按钮时，increment 方法将会执行，从而将 count 的值加一。

自定义指令

除了内置指令之外，Vue 还允许开发人员创建自定义指令，以满足特定的需求。自定义指令是一个 JavaScript 对象，它包含了一些生命周期钩子函数，用于在指令被绑定、插入到 DOM 中、更新和解绑时执行一些逻辑。

注册自定义指令

Vue 提供了一个全局方法 Vue.directive() 来注册自定义指令。该方法接收两个参数，第一个参数是指令名称，第二个参数是一个包含生命周期钩子函数的对象。

<template>
  <div v-focus></div>
</template>

<script>
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}
</script>

创建了一个名为 v-focus 的自定义指令，并将它绑定到 div 元素上。当 div 元素被插入到 DOM 中时，inserted 生命周期钩子函数将会被调用，从而将焦点设置到该元素上。

生命周期钩子函数

自定义指令可以包含一些生命周期钩子函数，用于在指令的不同生命周期阶段执行一些逻辑。以下是一些常用的生命周期钩子函数：

• bind：在指令被绑定到元素上时调用，只调用一次。
• inserted：在指令被插入到 DOM 中时调用。
• update：在指令所在的组件的 VNode 更新时调用，但可能发生在其子 VNode 更新之前。
• componentUpdated：在指令所在的组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：在指令从元素上解绑时调用。

钩子函数的参数

生命周期钩子函数都接收三个参数：

• el：指令所绑定的元素，可以用它操作 DOM。
• binding：一个对象，包含以下属性：
  • name：指令名称，不包括 v- 前缀。
  • value：指令的绑定值，可以是一个表达式。
  • oldValue：指令
• expression：绑定的字符串形式。
  • arg：指令参数，如果有的话。
  • modifiers：一个包含修饰符的对象，如果有的话。
• vnode：Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，只在 update 和 componentUpdated 钩子函数中可用。

钩子函数示例

以下是一个简单的示例，展示了自定义指令的一些生命周期钩子函数的使用：

<template>
  <div v-color="'red'" v-custom></div>
</template>

<script>
export default {
  directives: {
    color: {
      bind(el, binding) {
        el.style.color = binding.value
      },
      update(el, binding) {
        el.style.color = binding.value
      }
    },
    custom: {
      bind(el, binding, vnode) {
        console.log('bind')
      },
      inserted(el, binding, vnode) {
        console.log('inserted')
      },
      update(el, binding, vnode, oldVnode) {
        console.log('update')
      },
      componentUpdated(el, binding, vnode, oldVnode) {
        console.log('componentUpdated')
      },
      unbind(el, binding, vnode) {
        console.log('unbind')
      }
    }
  }
}
</script>

创建了两个自定义指令。第一个指令是 v-color，它用于设置元素的颜色。当该指令被绑定到元素上时，bind 生命周期钩子函数将会被调用，并将元素的颜色设置为绑定值。当指令所在的组件的 VNode 更新时，update 生命周期钩子函数将会被调用，并将元素的颜色更新为新的绑定值。

第二个指令是 v-custom，它展示了自定义指令的所有生命周期钩子函数的使用。在这个例子中，我们在每个钩子函数中打印了一个字符串，以便在控制台中查看每个钩子函数何时被调用。

总结

Vue 的指令是一种强大的工具，用于控制元素的行为和外观。Vue 内置了许多指令，包括 v-bind、v-model、v-for 和 v-if，它们可以满足大多数应用的需求。
除了内置指令之外，Vue 还允许开发人员创建自定义指令，以满足特定的需求。自定义指令是一个 JavaScript 对象，它包含了一些生命周期钩子函数，用于在指令被绑定、插入到 DOM 中、更新和解绑时执行一些逻辑。