vue指令实现
在Vue中，指令（Directives）是带有v-前缀的特殊属性，用于在DOM元素上应用响应式行为。以下是常见的Vue指令实现方法及示例：
v-bind
用于动态绑定属性或组件prop到表达式。
<img v-bind:src="imageUrl" alt="动态图片">
<!-- 简写 -->
<img :src="imageUrl" alt="动态图片">通过:简写可绑定任意属性，如:class、:style等。
v-model
实现表单输入与应用状态的双向绑定。
<input v-model="message" placeholder="输入内容">
<p>{{ message }}</p>支持修饰符如.lazy（触发change事件更新）、.number（自动转为数字类型）。
v-for
基于源数据渲染列表。
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item.text }}
</li>
</ul>必须为每项提供唯一:key以提高渲染性能。
v-if / v-else / v-else-if
条件渲染元素。
<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>v-if是惰性的，条件为假时元素会被销毁；v-show则始终渲染仅切换CSS显示状态。
v-on
监听DOM事件并执行方法。
<button v-on:click="handleClick">点击</button>
<!-- 简写 -->
<button @click="handleClick">点击</button>支持事件修饰符如.stop（阻止冒泡）、.prevent（阻止默认行为）。
v-text / v-html
更新元素内容。
<span v-text="rawText"></span>
<div v-html="rawHtml"></div>v-html会解析HTML字符串，需注意XSS风险。
v-pre / v-cloak
特殊用途指令。
<!-- 跳过编译 -->
<div v-pre>{{ 这里不编译 }}</div>
<!-- 避免未编译模板闪现 -->
<div v-cloak>{{ message }}</div>v-cloak需配合CSS使用：[v-cloak] { display: none }。
自定义指令
通过Vue.directive()注册全局指令：
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})使用方式：
<input v-focus>钩子函数包括bind、inserted、update等，可接收el、binding等参数。
