Vue3 完全指南

什么是模板语法？

Vue3 的模板语法是一种声明式的 HTML 扩展，允许开发者将 Vue 实例的数据绑定到 DOM 上，并添加各种交互逻辑。

插值

<div>{{ message }}</div>

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

<div v-bind:id="dynamicId"></div>
<!-- 简写 -->
<div :id="dynamicId"></div>

指令

指令是带有 v- 前缀的特殊属性，用于在表达式的值变化时，将某些行为应用到 DOM 上。

<div v-if="show">显示内容</div>
<div v-else-if="elseShow">否则如果</div>
<div v-else>否则</div>

<div v-show="show">显示内容</div>

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

<button v-on:click="handleClick">点击我</button>
<!-- 简写 -->
<button @click="handleClick">点击我</button>

<!-- 带参数 -->
<button @click="handleClick('hello')">点击我</button>

<!-- 事件修饰符 -->
<button @click.stop="handleClick">阻止冒泡</button>
<button @click.prevent="handleSubmit">阻止默认行为</button>

<input v-model="message" placeholder="输入消息">
<p>消息: {{ message }}</p>

<!-- 修饰符 -->
<input v-model.lazy="message"> <!-- 失去焦点时更新 -->
<input v-model.number="age"> <!-- 转换为数字 -->
<input v-model.trim="message"> <!-- 去除首尾空格 -->

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

事件修饰符

• .stop - 阻止冒泡
• .prevent - 阻止默认行为
• .capture - 使用事件捕获模式
• .self - 只有当事件目标是元素本身时才触发
• .once - 事件只触发一次
• .passive - 滚动事件的默认行为将立即触发

按键修饰符

• .enter - 回车键
• .tab - 制表键
• .delete - 删除键和退格键
• .esc - 退出键
• .space - 空格键
• .up - 上箭头
• .down - 下箭头
• .left - 左箭头
• .right - 右箭头

缩写

Vue 提供了一些常用指令的缩写，使模板更简洁。

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>