vue指令实现常见功能

v-model 实现双向数据绑定

通过 v-model 指令将表单输入与 Vue 实例的数据属性绑定，适用于 <input>、<select>、<textarea> 等表单元素。

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

在 Vue 实例中定义 message 数据属性即可实现双向同步。

v-for 渲染列表

使用 v-for 指令遍历数组或对象，动态生成列表项。需配合 :key 提供唯一标识以优化渲染性能。

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

数据示例：

data() {
  return {
    items: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' }
    ]
  }
}

v-if/v-show 条件渲染

• v-if：根据条件动态添加或移除 DOM 元素，适合切换频率低的场景。
• v-show：通过 CSS display 属性控制显示/隐藏，适合频繁切换的场景。

  <div v-if="isVisible">v-if 控制的元素</div>
  <div v-show="isActive">v-show 控制的元素</div>

v-bind 动态绑定属性

通过 v-bind（缩写 :）动态绑定 HTML 属性或组件 props。

<img :src="imageUrl" :alt="imageAlt">
<child-component :prop-data="parentData"></child-component>

v-on 事件监听

使用 v-on（缩写 @）监听 DOM 事件并触发方法。

<button @click="handleClick">点击事件</button>
<input @keyup.enter="submitForm">

方法定义：

methods: {
  handleClick() {
    console.log('按钮被点击');
  },
  submitForm() {
    console.log('回车提交表单');
  }
}

v-html 渲染原始 HTML

将数据作为 HTML 解析渲染（注意防范 XSS 攻击）。

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

数据示例：

data() {
  return {
    rawHtml: '<span style="color: red">红色文本</span>'
  }
}

v-once 一次性渲染

仅渲染元素或组件一次，后续数据变化不会更新视图。

<span v-once>{{ staticContent }}</span>

自定义指令实现功能

通过 Vue.directive 定义全局指令，例如实现自动聚焦：

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

使用方式：

<input v-focus>

修饰符增强指令

• 事件修饰符：.stop、.prevent、.capture 等。
• 按键修饰符：.enter、.tab、.esc 等。

  <form @submit.prevent="onSubmit">
  <input @keyup.enter="submit">
  </form>