Vue 通过自定义指令回顾v-内置指令(小结)

Vue 自定义指令可以实现新的 DOM 操作，以及对现有的指令功能扩充和封装。本文旨在回顾 Vue 内置指令以及介绍如何自定义指令。

Vue 内置指令小结

Vue 提供了多种内置指令，这里我们对这些指令进行一个小结。

v-model

可用于给表单元素绑定数据和更新数据。主要使用的表单元素有 input、textarea、select等。

示例：

<input v-model="name">

// data
data() {
  return {
    name: ''
  }
}

v-bind

可用于动态地绑定数据到 HTML 的属性上。

示例：

<template>
  <img v-bind:src="imageUrl">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  }
}
</script>

v-show

可根据数据的 true/false 来显示/隐藏元素。

示例：

<div v-show="isVisible">I am visible</div>

// data
data() {
  return {
    isVisible: true
  }
}

v-if

可根据条件是否成立来渲染元素到 DOM 中。当条件为 false 时，元素不会被渲染出来。

示例：

<div v-if="isVisible">I am visible</div>

// data
data() {
  return {
    isVisible: true
  }
}

v-for

可用于循环渲染数据，将数据一一对应到模板中。

示例：

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

// data
data() {
  return {
    items: ['item1', 'item2', 'item3']
  }
}

自定义指令

除了内置的指令，我们还可以自定义指令。自定义指令的定义和组件非常相似，都是通过 Vue.directive() 方法来定义。

自定义指令需要定义两个方法：bind和update。bind方法在元素被绑定到DOM中时执行，update方法在元素的值发生变化时执行。

示例1：自定义指令让元素自动获取焦点

Vue.directive('focus', {
  inserted: (el) => {
    el.focus()
  }
})

<!-- 元素自动获取焦点 -->
<input v-focus>

示例2：自定义指令让按钮在点击后变为不可点击状态

Vue.directive('disable', {
  bind: (el, binding) => {
    el.disabled = binding.value
  },
  update: (el, binding) => {
    el.disabled = binding.value
  }
})

<!-- 点击按钮后按钮变为不可点击状态 -->
<button v-disable="isBtnDisabled">Click me</button>

以上是自定义指令的使用示例，很容易发现自定义指令的好处是可以将一些复杂逻辑封装起来，让 Vue 更加的简洁和易用。

总结：本文介绍了 Vue 内置指令，以及自定义指令的定义和使用。掌握这些知识对于开发 Vue 应用来说是非常重要的。