vue指令及介绍

在 Vue.js 中，指令（Directives）是以 v- 前缀开头的特殊符号，通常用于为 DOM 元素添加功能或者绑定某些行为。Vue.js 提供了一些内置指令，同时也支持用户自定义指令。

1. 内置指令

内置指令是 Vue.js 提供的常用指令，下面是一些常见的内置指令：

1.1 v-bind

• 用于动态绑定一个或多个属性到元素上。

<img v-bind:src="imageSrc" alt="Description" />

等同于：

<img :src="imageSrc" alt="Description" />

• v-bind 用来绑定 HTML 属性（如 src, href 等），: 是 v-bind 的简写。

1.2 v-model

• 双向绑定表单元素的值（输入框、选择框等）。

<input v-model="message" />

• 绑定输入框的值与 Vue 实例中的数据进行双向绑定。

1.3 v-for

• 用来渲染列表数据。

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

• v-for 用于循环渲染数组或对象中的数据。

1.4 v-if / v-else-if / v-else

• 用来条件渲染元素或组件。

<p v-if="isVisible">This is visible</p>
<p v-else>This is not visible</p>

• v-if 在条件为 true 时渲染元素，v-else 是当 v-if 为 false 时渲染的元素。

1.5 v-show

• 用来控制元素的显示与隐藏（通过设置 display 样式）。

<p v-show="isVisible">This is visible</p>

• 与 v-if 不同，v-show 只是控制元素的 display 样式，而 v-if 则是根据条件动态销毁和创建 DOM 元素。

1.6 v-on

• 用于绑定事件监听器。

<button v-on:click="handleClick">Click me</button>

等同于：

<button @click="handleClick">Click me</button>

• v-on 用来绑定事件（如 click、mouseover 等），@ 是 v-on 的简写。

1.7 v-bind:class / v-bind:style

• 动态绑定元素的 class 和 style。

<div v-bind:class="classObject">Some content</div>

• 通过对象或者数组动态绑定 class 或 style，可以控制元素的样式。

<div v-bind:style="styleObject">Styled element</div>

1.8 v-cloak

• 用于保持元素及其子元素在 Vue 实例挂载前处于隐藏状态。

<div v-cloak>
  <!-- Vue.js 数据将在这里显示 -->
</div>

• v-cloak 保证 Vue 编译完成之前，模板不会被渲染。

1.9 v-pre

• 用于跳过元素和子元素的编译。

<div v-pre>
  {{ message }} <!-- 将不被编译 -->
</div>

• 适用于一些不需要进行 Vue 编译的内容，比如原生 HTML 模板。

1.10 v-slot

• 用于定义插槽（slot）内容，通常用于组件中。

<my-component>
  <template v-slot:default="props">
    <div>{{ props.msg }}</div>
  </template>
</my-component>

• v-slot 用来定义和传递插槽内容，支持具名插槽和默认插槽。

---

2. 自定义指令

除了内置指令，Vue.js 还允许开发者创建自定义指令。自定义指令用于扩展 Vue 的功能，可以通过 Vue.directive 来注册。

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted(el) {
    // 聚焦元素
    el.focus();
  }
});

使用时：

<input v-focus />

3. 常用自定义指令的生命周期钩子

自定义指令可以有多个生命周期钩子，常见的包括：

• bind：指令与元素绑定时调用，仅调用一次。
• inserted：当元素插入父节点时调用。
• update：当组件数据更新时调用。
• componentUpdated：当组件的 DOM 更新完毕时调用。
• unbind：当指令与元素解绑时调用。

---

总结

Vue.js 指令是功能强大的工具，可以在模板中声明式地控制 DOM。通过内置指令，开发者可以轻松地实现动态绑定、条件渲染、事件处理等常见需求，而自定义指令则能扩展 Vue 的功能，满足更多个性化需求。