Vue3 模板语法

目录

[一、插值语法 {{ }}](#一、插值语法 {{ }})

二、核心指令

三、动态属性绑定

四、事件修饰符

[五、条件渲染 vs 列表渲染总结](#五、条件渲染 vs 列表渲染总结)

六、最佳实践

[示例 1：插值语法 & 基础绑定](#示例 1：插值语法 & 基础绑定)

[示例 2：条件渲染](#示例 2：条件渲染)

[示例 3：列表渲染](#示例 3：列表渲染)

[示例 4：事件处理](#示例 4：事件处理)

[示例 5：动态绑定](#示例 5：动态绑定)

[示例 6：双向绑定](#示例 6：双向绑定)

[示例 7：综合实践](#示例 7：综合实践)

---

一、插值语法 {``{ }}

• 作用：将数据绑定到 DOM 文本内容。

• 特性：

  • 支持 JavaScript 表达式（如 {``{ count + 1 }}），但不支持语句（如 if）。

  • 自动响应数据变化（数据驱动视图）。

• 示例：

  <p>{{ message }}</p>
  <p>{{ user.name }}</p>

---

二、核心指令

1. 条件渲染：v-if vs v-show

   • v-if：

     • 根据条件销毁或创建元素。

     • 适用于切换频率低的场景（如初始化渲染）。

     • 支持 v-else 和 v-else-if。

   • v-show：

     • 通过 CSS display 控制显示/隐藏。

     • 适用于频繁切换的场景（如选项卡）。

   • 示例：

     <div v-if="isVisible">v-if 内容</div>
     <div v-show="isActive">v-show 内容</div>

2. 列表渲染：v-for

   • 作用：遍历数组或对象生成列表。

   • key 的作用：

     • 唯一标识：帮助 Vue 跟踪节点身份，优化复用逻辑。

     • 避免问题：防止列表更新时出现错乱（如状态保留问题）。

   • 最佳实践：

     • 使用唯一 ID （如 :key="item.id"）。

     • 避免用 index 作为 key（除非列表静态且无排序）。

   • 示例：

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

3. 属性绑定：v-bind（简写 :）

   • 动态属性 ：将数据绑定到 HTML 属性（如 id、class）。

   • 示例：

     <img :src="imageUrl" />
     <div :class="{ active: isActive }"></div>

4. 事件绑定：v-on（简写 @）

   • 监听事件：如点击、输入等。

   • 示例：

     <button @click="handleClick">点击</button>

5. 双向绑定：v-model

   • 作用 ：表单输入与数据的双向同步（语法糖 = :value + @input）。

   • 示例：

     <input v-model="message" />

---

三、动态属性绑定

1. 动态 Class（:class）

   • 对象语法：按条件添加类名。

     <div :class="{ active: isActive, 'text-danger': hasError }"></div>

   • 数组语法：绑定多个类名。

     <div :class="[activeClass, errorClass]"></div>

2. 动态 Style（:style）

   • 对象语法：绑定样式对象。

     <div :style="{ color: textColor, fontSize: size + 'px' }"></div>

   • 数组语法：组合多个样式对象。

     <div :style="[baseStyles, overrideStyles]"></div>

---

四、事件修饰符

• 常用修饰符：

  • .stop：阻止事件冒泡（等价于 event.stopPropagation()）。

  • .prevent：阻止默认行为（等价于 event.preventDefault()）。

  • .once：事件只触发一次。

  • .self：仅当事件从元素自身触发时生效。

• 示例：

  <button @click.stop="handleClick">阻止冒泡</button>
  <form @submit.prevent="handleSubmit">阻止默认提交</form>

• 按键修饰符：

按键别名： ​

Vue 为一些常用的按键提供了别名：

• .enter
• .tab
• .delete (捕获"Delete"和"Backspace"两个按键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统按键修饰符： ​

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。

• .ctrl
• .alt
• .shift
• .meta

<!-- 仅在 key 为 Enter 时调用 submit -->
<input @keyup.enter="submit" />

<!-- Alt + Enter --> 
<input @keyup.alt.enter="clear" />
<!-- Ctrl + 点击 --> 
<div @click.ctrl="doSomething">Do something</div> 

---

五、条件渲染 vs 列表渲染总结

特性	v-if	v-show	v-for（需 key）
渲染方式	条件为假时销毁元素	始终渲染，切换 CSS	动态生成列表项
性能	初始渲染开销低	切换开销低	列表变化时依赖 key 优化
适用场景	不频繁切换的条件	频繁显示/隐藏	动态列表数据

---

六、最佳实践

1. v-for 的 key：

   • 始终使用唯一标识（如数据库 ID）。

   • 避免 index，除非列表简单且无状态。

2. v-if 与 v-for 优先级：

   • 避免在同一个元素上同时使用（Vue3 中 v-if 优先级更高）。

   • 使用 <template> 包裹解决：

     <template v-for="item in items" :key="item.id">
       <div v-if="item.isVisible">{{ item.name }}</div>
     </template>

3. 事件处理：

   • 复杂逻辑应封装到方法中，避免内联表达式。

---

示例 1：插值语法 & 基础绑定

<template>
  <!-- 文本插值 -->
  <p>{{ message }}</p>
  
  <!-- JavaScript 表达式 -->
  <p>{{ count + 1 }}</p>
  
  <!-- 属性绑定 -->
  <a :href="'https://vuejs.org'">官网链接</a>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello Vue3!')
const count = ref(0)
</script>

---

示例 2：条件渲染

<template>
  <!-- v-if 链式判断 -->
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 60">合格</p>
    <p v-else>不合格</p>
  </div>

  <!-- v-show 切换 -->
  <button @click="showA = !showA">切换显示</button>
  <div v-show="showA">显示/隐藏内容</div>
</template>

<script setup>
import { ref } from 'vue'

const showA = ref(true)
const score = ref(85)
</script>

---

示例 3：列表渲染

<template>
  <!-- 带 key 的列表渲染 -->
  <ul>
    <li 
      v-for="(item, index) in books" 
      :key="item.id"
    >
      {{ index + 1 }}. {{ item.title }}
    </li>
  </ul>

  <!-- 动态添加项 -->
  <input v-model="newBook">
  <button @click="books.push({ 
    id: Date.now(), 
    title: newBook 
  })">添加书籍</button>
</template>

<script setup>
import { ref } from 'vue'

const books = ref([
  { id: 'b1', title: 'Vue3 入门' },
  { id: 'b2', title: 'TypeScript 进阶' }
])

const newBook = ref('')
</script>

---

示例 4：事件处理

<template>
  <!-- 内联事件处理 -->
  <button @click="handleClick('按钮点击')">点击事件</button>

  <!-- 事件修饰符 -->
  <div @click.self="console.log('父元素点击')">
    <button @click.stop="console.log('子元素点击')">
      阻止冒泡
    </button>
  </div>

  <!-- 按键修饰符 -->
  <input 
    @keyup.enter="console.log('回车按下')" 
    @keyup.esc="console.log('ESC 按下')"
  >
</template>

<script setup>
function handleClick(msg) {
  alert(msg)
}

function handleKeyup(e) {
  console.log('按键码:', e.keyCode)
}
</script>

---

示例 5：动态绑定

<template>
  <!-- 动态 class (对象语法) -->
  <div :class="{ active: isActive, 'text-danger': false }">
    动态类名
  </div>

  <!-- 动态 style (数组语法) -->
  <div :style="[
    { color: errorColor }, 
    styleObject
  ]">
    动态样式
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isActive = ref(true)
const errorColor = ref('red')
const styleObject = ref({
  fontSize: '20px',
  fontWeight: 'bold'
})
</script>

---

示例 6：双向绑定

<template>
  <!-- 文本输入 -->
  <input v-model="text" placeholder="输入内容">

  <!-- 复选框 -->
  <input type="checkbox" v-model="checked">

  <!-- 单选按钮 -->
  <select v-model="selectedOption">
    <option value="A">选项A</option>
    <option value="B">选项B</option>
  </select>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('')
const checked = ref(false)
const selectedOption = ref('A')
</script>

---

示例 7：综合实践

<template>
  <!-- 条件渲染 + 列表渲染 -->
  <div v-if="activeTodos.length > 0">
    <h3>待办事项 ({{ activeTodos.length }})</h3>
    <ul>
      <li 
        v-for="todo in activeTodos" 
        :key="todo.id"
        :class="{ completed: todo.done }"
      >
        {{ todo.text }}
        <button @click="todo.done = true">完成</button>
      </li>
    </ul>
  </div>
  <p v-else>全部任务已完成！🎉</p>

  <!-- 双向绑定 + 事件修饰符 -->
  <form @submit.prevent="addTodo">
    <input 
      v-model.trim="newTodo" 
      @keyup.enter="addTodo"
    >
    <button type="submit">添加</button>
  </form>
</template>

<script setup>
import { ref, computed } from 'vue'

const todos = ref([
  { id: 1, text: '学习 Vue3', done: true },
  { id: 2, text: '掌握组合式API', done: false }
])

const newTodo = ref('')

const activeTodos = computed(() => 
  todos.value.filter(t => !t.done)
)

function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      done: false
    })
    newTodo.value = ''
  }
}
</script>

---