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 中大部分常用场景，合理使用可以极大提升开发效率和代码可维护性。
