vue常用的一些指令整理

在 Vue.js 中，指令（Directives）是特殊的 HTML 属性，用于在模板中绑定行为。Vue 提供了许多内置指令，你也可以定义自定义指令。以下是指令的分类和常用用法：

---

1. 内置指令

v-bind

用于动态绑定属性或特性。

<a v-bind:href="url">访问链接</a>
<!-- 缩写 -->
<a :href="url">访问链接</a>

v-model

用于双向绑定表单元素的值。

<input v-model="message" placeholder="输入内容">
<p>内容：{{ message }}</p>

v-if

条件渲染，根据表达式的值动态添加或移除 DOM。

<p v-if="seen">这是一条信息</p>

v-else / v-else-if

配合 v-if 使用。

<p v-if="type === 'A'">A 类型</p>
<p v-else-if="type === 'B'">B 类型</p>
<p v-else>其他类型</p>

v-show

条件渲染，但不移除元素，仅切换 display 样式。

<p v-show="isVisible">显示内容</p>

v-for

用于列表渲染。

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

v-on

绑定事件监听器。

<button v-on:click="sayHello">点击我</button>
<!-- 缩写 -->
<button @click="sayHello">点击我</button>

v-html

插入 HTML 内容。

<div v-html="htmlContent"></div>

v-text

更新文本内容。

<p v-text="text"></p>

v-cloak

防止未编译内容闪烁，用于保持元素隐藏，直到 Vue 实例准备完毕。

<p v-cloak>加载中...</p>

v-once

一次性绑定，渲染后不会更新。

<p v-once>{{ message }}</p>

v-pre

跳过编译，输出原始 Mustache 表达式。

<p v-pre>{{ message }}</p>

---

2. 自定义指令

Vue 支持创建自定义指令，用于处理复杂的 DOM 操作。

注册局部指令

export default {
  directives: {
    focus: {
      // 当绑定的元素插入到 DOM 中时调用
      inserted(el) {
        el.focus();
      }
    }
  }
}

注册全局指令

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

在模板中使用

<input v-focus>

指令钩子函数

1. bind：绑定指令时调用。
2. inserted：元素插入 DOM 时调用。
3. update：组件更新时调用。
4. componentUpdated：组件及其子组件更新完成后调用。
5. unbind：指令解绑时调用。

Vue.directive('demo', {
  bind(el, binding, vnode) {
    console.log('绑定');
  },
  inserted(el) {
    console.log('插入');
  },
  update(el, binding) {
    console.log('更新');
  },
  componentUpdated(el, binding) {
    console.log('更新完成');
  },
  unbind(el) {
    console.log('解绑');
  }
});

---

3. 修饰符

修饰符是以点开头的后缀，用于修改指令的行为。

v-on 修饰符

• .stop：阻止事件冒泡。
• .prevent：阻止默认事件。
• .capture：使用捕获模式。
• .self：只在事件从绑定元素本身触发时触发。
• .once：事件只触发一次。
• .passive：不阻止默认行为（如滚动）。

<button @click.stop="doSomething">阻止冒泡</button>

v-model 修饰符

• .lazy：绑定在 change 事件而非 input。
• .number：将输入值转换为数字。
• .trim：自动移除首尾空格。

<input v-model.lazy="message">
<input v-model.number="age">
<input v-model.trim="text">

---

4. 动态指令

指令可以动态使用。

<div v-bind:[attributeName]="value"></div>
<div v-on:[eventName]="handler"></div>

---

通过 Vue 的指令，你可以轻松实现模板与数据的高效绑定。