vue 指令实现

在 Vue.js 中，指令（Directives）是带有 v- 前缀的特殊属性，用于在 DOM 上应用响应式行为。以下是一些常用指令及其实现方式：

v-bind

动态绑定一个或多个属性到表达式。

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

简写形式：

<img :src="imageSrc" :alt="imageAlt">

v-model

在表单输入元素上创建双向数据绑定。

<input v-model="message" placeholder="Edit me">
<p>Message is: {{ message }}</p>

v-for

基于数组渲染列表。

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

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

条件渲染元素。

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Other Type</div>

v-show

根据条件显示或隐藏元素（通过 CSS 的 display 属性）。

<h1 v-show="isVisible">Hello!</h1>

v-on

监听 DOM 事件并执行方法。

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

简写形式：

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

v-text

更新元素的 textContent。

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{ msg }}</span>

v-html

更新元素的 innerHTML（注意 XSS 风险）。

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

v-pre

跳过这个元素和其子元素的编译。

<span v-pre>{{ this will not be compiled }}</span>

v-cloak

保持在元素上直到关联实例结束编译（用于解决未编译模板闪现问题）。

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

v-once

只渲染元素和组件一次。

<span v-once>This will never change: {{ msg }}</span>

自定义指令

可以注册全局或局部自定义指令。

// 全局指令
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

// 局部指令
directives: {
  focus: {
    inserted: function (el) {
      el.focus()
    }
  }
}

使用方式：

<input v-focus>