从零开始学 Vue3（三）：模板语法全解，写页面就像搭积木
目录
大家好，上一篇我们搞定了 Vue3 最核心的两个响应式 API：ref和reactive。现在我们已经会创建响应式数据了，那怎么把这些数据漂亮地显示到页面上呢？
这就要用到 Vue3 的模板语法了。模板语法就是 Vue3 给我们提供的一套 "写页面的规则"，它在普通 HTML 的基础上，加了一些简单的扩展，让我们可以很方便地把数据和页面绑定在一起。
一、最基础的：插值语法
插值语法就是我们上一篇已经见过的双大括号{{ }}。它就像在页面上挖了一个洞，你可以把任何响应式数据放进去，Vue3 会自动把数据填到这个洞里。
1. 基本用法
<template>
<div>
<!-- 显示一个字符串 -->
<h1>你好，{{ name }}</h1>
<!-- 显示一个数字 -->
<p>你的年龄是：{{ age }}岁</p>
<!-- 显示一个布尔值 -->
<p>你是否成年：{{ isAdult ? '是' : '否' }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('小明')
const age = ref(18)
const isAdult = ref(true)
</script>你看，就这么简单。只要把变量放在双大括号里，页面上就会自动显示变量的值。而且当变量变化时，页面上的内容也会自动更新。
2. 可以写什么？
双大括号里可以写任何简单的 JavaScript 表达式：
- 变量
- 数学运算：
{{ age + 1 }} - 字符串拼接：
{{ '你好，' + name }} - 三元运算符：
{{ isAdult ? '成年' : '未成年' }} - 调用函数：
{{ message.toUpperCase() }}
3. 不能写什么？
双大括号里不能写复杂的语句：
- 不能写 if 语句：
{{ if (isAdult) { return '成年' } }} - 不能写 for 循环：
{{ for (let i=0; i<10; i++) { ... } }} - 不能定义变量：
{{ let a = 1 }}
记住：双大括号里只能写一行代码，而且这行代码必须有一个返回值。
二、给 HTML 标签加属性：v-bind
双大括号只能用来显示标签之间的内容。那如果我想给 HTML 标签的属性绑定数据怎么办？比如给图片的src属性绑定一个地址，给链接的href属性绑定一个网址。
这时候就要用到v-bind指令了。
1. 基本用法
<template>
<div>
<!-- 给图片的src属性绑定数据 -->
<img v-bind:src="imageUrl" alt="图片">
<!-- 给链接的href属性绑定数据 -->
<a v-bind:href="linkUrl">点击跳转</a>
<!-- 给按钮的disabled属性绑定数据 -->
<button v-bind:disabled="isDisabled">按钮</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const imageUrl = ref('https://example.com/image.jpg')
const linkUrl = ref('https://www.baidu.com')
const isDisabled = ref(false)
</script>v-bind:属性名="变量"，这就是 v-bind 的基本格式。它的作用就是把变量的值和 HTML 标签的属性绑定在一起。当变量变化时，标签的属性也会自动更新。
2. 简写形式
因为 v-bind 用得太频繁了，Vue3 给它提供了一个简写形式：直接写冒号:。
上面的代码可以简写成这样：
<img :src="imageUrl" alt="图片">
<a :href="linkUrl">点击跳转</a>
<button :disabled="isDisabled">按钮</button>是不是简洁多了？以后我们都用简写形式就可以了。
三、给元素加事件：v-on
现在我们会显示数据了，那怎么响应用户的操作呢？比如用户点击了一个按钮，我们要执行一个函数。
这时候就要用到v-on指令了。
1. 基本用法
<template>
<div>
<p>当前数字：{{ count }}</p>
<!-- 给按钮绑定点击事件 -->
<button v-on:click="addOne">加1</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function addOne() {
count.value++
}
</script>v-on:事件名="函数名"，这就是 v-on 的基本格式。当用户触发对应的事件时，Vue3 就会自动调用我们定义的函数。
2. 简写形式
和 v-bind 一样，v-on 也有简写形式：直接写@。
上面的代码可以简写成这样：
<button @click="addOne">加1</button>这是 Vue3 里最常用的写法，一定要记住。
3. 常用事件
除了click点击事件，还有很多常用的事件：
@input：输入框内容变化时触发@change：输入框失去焦点或内容变化时触发@mouseover：鼠标移到元素上时触发@mouseout：鼠标离开元素时触发@keydown：键盘按下时触发
四、控制元素显示隐藏：条件渲染
有时候我们需要根据条件来决定是否显示某个元素。比如用户登录了就显示 "欢迎回来"，没登录就显示 "请登录"。
这时候就要用到条件渲染指令了。
1. v-if 和 v-else
这是最常用的条件渲染方式：
<template>
<div>
<p v-if="isLoggedIn">欢迎回来，{{ username }}</p>
<p v-else>请先登录</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const isLoggedIn = ref(true)
const username = ref('小明')
</script>当isLoggedIn为true时，显示第一个 p 标签；为false时，显示第二个 p 标签。
你还可以用v-else-if来添加更多的条件：
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 60">及格</p>
<p v-else>不及格</p>2. v-show
除了v-if，还有一个v-show指令也可以控制元素的显示隐藏：
<p v-show="isShow">我会显示或隐藏</p>3. v-if 和 v-show 的区别
这是初学者最容易搞混的地方，我用一句话给你讲清楚：
- v-if：条件为 false 时，元素会被直接从 DOM 树中删除
- v-show：条件为 false 时，元素只是被隐藏起来（display: none），还在 DOM 树中
那什么时候用哪个呢？
- 如果元素需要频繁切换显示隐藏，用
v-show（性能更好） - 如果元素切换不频繁，或者切换后就不会再显示了，用
v-if（更节省资源）
五、循环渲染列表：v-for
在开发中，我们经常需要显示一个列表，比如商品列表、用户列表、评论列表等等。这时候就要用到v-for指令了。
1. 基本用法
<template>
<div>
<h3>水果列表</h3>
<ul>
<!-- 循环渲染数组 -->
<li v-for="fruit in fruits" :key="fruit.id">
{{ fruit.name }} - ￥{{ fruit.price }}
</li>
</ul>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const fruits = reactive([
{ id: 1, name: '苹果', price: 5 },
{ id: 2, name: '香蕉', price: 3 },
{ id: 3, name: '橙子', price: 4 }
])
</script>v-for="item in list" :key="item.id"，这是 v-for 的标准格式。
item：数组中的每一项list：要循环的数组:key：必须给每个循环项加一个唯一的 key，通常用 id
2. 为什么必须加 key？
这是初学者最常问的问题："为什么 v-for 一定要加 key？不加行不行？"
我给你打个比方：你去快递站取快递，快递员如果只告诉你 "你的快递在第三排"，你可能要找半天。但如果快递员告诉你 "你的快递编号是 12345"，你一下子就能找到。
key 就是每个循环项的 "身份证号"。Vue3 通过 key 来识别每个元素，当列表发生变化时，Vue3 可以快速找到变化的元素，只更新需要更新的部分，大大提高了性能。
记住：只要用 v-for，就必须加 key，而且 key 必须是唯一的。
六、实用技巧：动态绑定 class 和 style
在开发中，我们经常需要根据条件来动态改变元素的样式。比如按钮选中时变蓝色，错误提示变红色等等。
Vue3 提供了非常方便的方式来动态绑定 class 和 style。
1. 动态绑定 class
<template>
<div>
<!-- 对象语法：class名: 条件 -->
<button :class="{ active: isActive }">按钮</button>
<!-- 可以同时绑定多个class -->
<div :class="{ red: isError, bold: isImportant }">提示信息</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
const isError = ref(false)
const isImportant = ref(true)
</script>
<style>
.active {
background-color: blue;
color: white;
}
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>当条件为 true 时，对应的 class 就会被添加到元素上；为 false 时，就会被移除。
2. 动态绑定 style
<template>
<div>
<!-- 对象语法 -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">
这段文字的颜色和大小是动态的
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const textColor = ref('red')
const fontSize = ref(20)
</script>七、最佳实践
- 插值语法：只写简单表达式，不要写复杂逻辑
- v-bind：永远用简写形式
: - v-on：永远用简写形式
@ - v-if vs v-show：频繁切换用 v-show，否则用 v-if
- v-for：必须加 key，而且 key 要用唯一的 id，不要用索引
- 动态样式：优先用动态 class，复杂情况再用动态 style
八、最后说几句
今天我们讲了 Vue3 所有常用的模板语法。这些语法看起来很多，但其实都非常简单，而且用起来特别方便。
你会发现，用 Vue3 写页面就像搭积木一样。你只要把数据准备好，然后用模板语法把数据和页面拼在一起，剩下的事情 Vue3 都帮你搞定了。
现在你已经会创建响应式数据，也会把数据显示到页面上了。下一篇我们会讲组件化开发，这是 Vue3 最强大的功能之一，也是现代前端开发的核心思想。
更多推荐
6
0- 0
已为社区贡献4条内容
所有评论(0)