vue 指令实现

Vue 指令是 Vue.js 提供的特殊属性，用于在 DOM 元素上应用特定的行为。以下是一些常见 Vue 指令的实现方式和使用场景：

v-model

双向数据绑定指令，常用于表单元素。它将表单输入的值与 Vue 实例的数据属性绑定。

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

v-bind

动态绑定一个或多个属性，或一个组件 prop 到表达式。可以简写为 :。

<img v-bind:src="imageSrc">
<!-- 简写 -->
<img :src="imageSrc">

v-for

基于源数据多次渲染元素或模板块。必须使用特定的语法 item in items。

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

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

条件渲染指令，根据表达式的真假值来有条件地渲染元素。

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

v-show

根据表达式真假值切换元素的 display CSS 属性。

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

v-on

绑定事件监听器，可以简写为 @。

<button v-on:click="doSomething">Click me</button>
<!-- 简写 -->
<button @click="doSomething">Click me</button>

v-text

更新元素的 textContent。与插值表达式 {{ }} 类似，但会覆盖元素内所有内容。

<span v-text="msg"></span>

v-html

更新元素的 innerHTML，用于输出真正的 HTML。注意防范 XSS 攻击。

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

v-pre

跳过这个元素和它的子元素的编译过程，显示原始 Mustache 标签。

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

v-cloak

保持在元素上直到关联实例结束编译后自动移除，常用于解决初始化时的闪烁问题。

<div v-cloak>
  {{ message }}
</div>

v-once

只渲染元素和组件一次，随后的重新渲染会被跳过。

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

自定义指令

可以通过 Vue.directive 注册全局自定义指令，或在组件选项中通过 directives 注册局部指令。

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

使用方式：

<input v-focus>

以上指令覆盖了 Vue.js 中大部分常用场景，合理使用可以极大提升开发效率和代码可维护性。