一、写在前面如果说上一篇文章解决的是Vue3 项目是怎么跑起来的那么这一篇要解决的问题就是Vue3 页面到底怎么写很多新手刚接触 Vue3 时最先感到陌生的并不是项目结构而是模板里的这些写法template h1{{ title }}/h1 img :srcimgUrl / button clickchangeTitle修改标题/button p v-ifisShow这是一段文字/p li v-foritem in list :keyitem.id{{ item.name }}/li /template你一眼看过去就会发现Vue 模板不像纯 HTML多了{{ }}多了:多了多了v-if多了v-for这些东西本质上就是Vue 模板语法和Vue 指令。它们的作用只有一个让页面不再只是静态展示而是能和数据、逻辑、交互联动起来。所以这一篇文章我们就把 Vue3 最常用、也是最基础的模板能力系统过一遍。你学完这篇之后至少要做到能看懂最基础的 Vue 页面能自己写简单的数据展示和页面交互能初步理解“数据驱动页面”到底是什么意思二、什么是 Vue3 的模板语法先说最核心的一句话Vue 的模板本质上是在 HTML 基础上增加了一层“数据与逻辑绑定能力”。也就是说你写 Vue 页面时外表看起来像 HTML但实际上它已经不是单纯的 HTML 了。比如原生 HTML 里你可能会这样写一个标题h1你好Vue3/h1这是静态内容页面写死了就是“你好Vue3”。而在 Vue 里你可以这样写template h1{{ title }}/h1 /template script setup const title 你好Vue3 /script这样标题内容就来自数据而不是写死在页面里。所以你可以把 Vue 模板理解成表面上是在写标签实际上是在让标签和数据、逻辑建立联系这就是 Vue 模板语法存在的意义。三、插值表达式{{ }}把数据显示到页面上这是 Vue 模板里最基础、最常见的语法。1. 基本写法template h1{{ message }}/h1 /template script setup const message 欢迎学习 Vue3 /script页面最终会显示欢迎学习 Vue3这里的{{ message }}就叫做插值表达式。它的作用非常直接把脚本里的数据插入到模板中显示出来。2. 插值表达式能放什么通常可以放变量简单表达式字符串拼接三元表达式例如template p{{ name }}/p p{{ age 1 }}/p p{{ 姓名 name }}/p p{{ isLogin ? 已登录 : 未登录 }}/p /template script setup const name 张三 const age 20 const isLogin true /script这说明{{ }}不只是“取变量”它本质上还能写一些简单表达式。3. 插值表达式适合做什么最常见的用途包括显示标题显示用户名显示价格显示状态文字显示拼接后的内容例如商品卡片template div h2{{ productName }}/h2 p价格{{ price }} 元/p /div /template script setup const productName 机械键盘 const price 299 /script4. 插值表达式不能乱写复杂逻辑新手常见问题是把太多逻辑直接塞进{{ }}里。虽然简单表达式可以写但不建议把复杂处理全写在模板中。因为模板的核心职责还是“展示”而不是承担太重的逻辑计算。所以你可以先建立一个习惯模板里尽量展示结果不要堆太复杂的逻辑。四、v-bind给标签属性绑定动态数据有了{{ }}之后很多人会自然想到一个问题如果我想动态修改标签的属性怎么办比如图片地址src链接地址href输入框的valueclassidtitle这时候就要用到v-bind。1. 基本写法template img v-bind:srcimgUrl / /template script setup const imgUrl https://example.com/demo.png /script这里的意思就是把imgUrl这个数据绑定到图片的src属性上。2. 简写方式:v-bind很常用所以 Vue 提供了简写方式template img :srcimgUrl / /template这和下面是完全一样的img v-bind:srcimgUrl /实际开发中大家更常用简写形式因为更简洁。3. 常见使用场景绑定链接地址template a :hrefurl点击跳转/a /template script setup const url https://vuejs.org/ /script绑定标题提示template button :titletip鼠标移入查看提示/button /template script setup const tip 这是一个按钮 /script绑定 class 或 idtemplate div :classclassName内容区域/div /template script setup const className box /script4.{{ }}和v-bind的区别这是新手特别容易混的地方。{{ }}作用于标签内容h1{{ title }}/h1表示标题内部显示数据。v-bind作用于标签属性img :srcimgUrl /表示标签属性由数据控制。你可以简单记成显示文字内容用{{ }}控制标签属性用v-bind五、click事件绑定让页面“动起来”前面我们解决的是“数据怎么显示到页面”接下来要解决的是用户点击按钮时页面怎么响应这就要用到 Vue 的事件绑定。1. 最常见的事件点击事件template button clickshowMessage点我/button /template script setup const showMessage () { alert(你好Vue3) } /script这里的clickshowMessage表示当按钮被点击时执行showMessage这个函数。2.click是什么它本质上可以理解为监听按钮点击事件一旦点击就执行你指定的方法你也可以把它看成v-on:click的简写。完整写法是button v-on:clickshowMessage点我/button简写后就是button clickshowMessage点我/button实际开发中几乎都写简写形式。3. 一个最基础的交互案例template div h1{{ title }}/h1 button clickchangeTitle修改标题/button /div /template script setup import { ref } from vue const title ref(你好Vue3) const changeTitle () { title.value 标题已经被修改 } /script当你点击按钮后页面上的标题就会自动变化。这个例子非常重要因为它已经体现了 Vue 的核心思想修改数据页面自动更新。你没有手动去操作 DOM没有写document.querySelector只是改了数据界面就跟着变了。六、v-model表单双向绑定这是 Vue 初学阶段非常有代表性的一个指令。它主要用于表单元素比如输入框文本域单选框复选框下拉框1. 最基础的输入框绑定template div input v-modelusername / p你输入的是{{ username }}/p /div /template script setup import { ref } from vue const username ref() /script当你在输入框里输入内容时下面的文字会实时变化。这说明输入框改了数据变了数据变了页面也更新了这就是所谓的双向绑定。2. 什么叫双向绑定可以把它拆成两个方向理解从数据到页面如果username变了输入框显示的内容也会跟着变。从页面到数据如果用户在输入框里输入内容username这个数据也会跟着变。所以叫“双向绑定”。3. 为什么v-model对新手很重要因为它特别直观能让你第一次真正感受到页面和数据是联动的。以前你写原生 JS想获取输入框内容可能要找 DOM取值手动处理而在 Vue 里一个v-model就把这些基础联动打通了。七、v-if和v-show控制元素显示与隐藏页面开发里经常有这种需求登录后显示欢迎信息没登录时显示登录按钮点击按钮后展开内容根据条件决定一段文字要不要出现这时候就要用到条件渲染。1.v-if的基本写法template p v-ifisShow这段文字会显示/p /template script setup const isShow true /script当isShow为true时这段文字显示为false时这段文字不显示。2. 配合按钮切换显示状态template div button clicktoggleText切换显示/button p v-ifisShow这是一段可切换显示的文字/p /div /template script setup import { ref } from vue const isShow ref(true) const toggleText () { isShow.value !isShow.value } /script点击按钮后文字会一会显示、一会消失。3.v-show的基本写法template p v-showisShow这段文字也能切换显示/p /template它的表面效果和v-if很像但底层处理方式不同。4.v-if和v-show的区别这是一个非常高频的面试和基础问题。v-if是“真正决定这个元素要不要渲染”。如果条件不成立这个元素压根不会出现在页面结构中。v-show是“元素先存在再通过样式控制是否显示”。通常是通过display: none这种方式隐藏。5. 怎么选你可以先这样理解切换不频繁可以优先考虑v-if切换很频繁可以优先考虑v-show对新手来说先记住核心区别就够了v-if更像“创建 / 删除元素”v-show更像“显示 / 隐藏元素”。八、v-for根据数据批量渲染列表这是 Vue 页面开发中非常核心的能力。因为真实项目里很多内容都不是写死的而是来自数组数据比如学生名单商品列表消息列表评论区待办事项这时候就要用v-for来循环渲染。1. 最基础的列表渲染template ul li v-foritem in list :keyitem.id {{ item.name }} /li /ul /template script setup const list [ { id: 1, name: 语文 }, { id: 2, name: 数学 }, { id: 3, name: 英语 } ] /script页面会显示一个列表语文数学英语这里的意思是遍历list数组把每一项都渲染成一个li。2.item in list怎么理解可以理解成list是你要循环的数据源item是每次循环拿到的当前项也就是说循环第一次时item { id: 1, name: 语文 }第二次时item { id: 2, name: 数学 }所以模板中写{{ item.name }}就能依次显示每一项的名字。3. 也可以拿到索引template ul li v-for(item, index) in list :keyitem.id {{ index }} - {{ item.name }} /li /ul /template这里的index就是当前项的下标。九、为什么v-for一定要加key这是新手最容易“会写但不理解”的一个点。你会经常看到这样的写法li v-foritem in list :keyitem.id {{ item.name }} /li很多人知道要加key但不知道为什么。1.key的作用是什么简单说key是 Vue 用来识别每一项“身份”的标记。当列表更新时Vue 需要知道哪一项是旧的哪一项是新的哪一项被删除了哪一项只是位置变了这时候key就非常重要。2. 为什么不能随便不写如果不写key或者乱写Vue 在更新列表时就不容易精准识别每一项可能导致一些不必要的更新甚至在复杂场景下出现显示异常。所以你可以先记住一个非常实用的原则只要写v-for就尽量提供一个稳定、唯一的key。最理想的key通常是数据自己的唯一 id。例如:keyitem.id3. 能不能用下标当key可以写但不推荐作为默认习惯。因为下标会随着列表增删改查发生变化而key更适合使用“稳定不变的唯一标识”。所以新手阶段你先养成一个好习惯有唯一 id就优先用 id不要一上来就默认写index十、一个综合小案例把这些基础指令串起来下面给你一个很适合初学者理解的综合案例。template div classbox h1{{ title }}/h1 input v-modelnewTask placeholder请输入任务内容 / button clickaddTask添加任务/button p v-iflist.length 0当前还没有任务/p ul v-else li v-foritem in list :keyitem.id {{ item.name }} /li /ul /div /template script setup import { ref } from vue const title ref(我的待办列表) const newTask ref() const list ref([ { id: 1, name: 学习 Vue3 }, { id: 2, name: 完成练习 } ]) const addTask () { if (newTask.value.trim() ) return list.value.push({ id: Date.now(), name: newTask.value }) newTask.value } /script style scoped .box { width: 400px; margin: 20px auto; } /style这个案例里已经包含了很多基础点{{ }}显示标题v-model绑定输入框click绑定按钮事件v-if判断列表是否为空v-for渲染任务列表:key标记每一项身份你会发现Vue3 的模板语法虽然看起来种类不少但本质上都是在围绕两件事展开页面显示什么页面怎么根据数据变化而变化十一、新手最常见的错误这一部分非常重要因为很多初学者不是“完全不会”而是容易在小地方出错。1. 把{{ }}用到属性里错误写法img src{{ imgUrl }} /这是不对的。正确写法应该是img :srcimgUrl /记住标签内容用{{ }}标签属性用v-bind或:2. 事件里直接写错函数名例如模板里写button clickchangeName按钮/button但脚本里没有定义changeName页面点击就会报错。所以事件绑定时一定要确认函数真的存在。3.v-for忘了写key虽然有时候页面也能显示但这不是好习惯。从一开始就养成规范写法后面会省很多事。4.v-if和v-for一起乱用新手前期经常在同一个标签上同时写很多复杂逻辑结果自己把自己绕晕。前期建议你先把逻辑拆开写清楚别急着一口气写太多。5. 还没理解“数据驱动页面”很多新手写 Vue 时脑子里仍然在想我要怎么手动改页面内容但 Vue 的思路是先改数据页面自己更新。这个思维一定要尽早切换过来。十二、这一篇你到底要掌握到什么程度学完这一篇你不需要立刻变得很熟练但至少应该做到下面这些事能用{{ }}把数据显示到页面能用v-bind绑定图片、链接等属性能用click给按钮绑定事件能用v-model做输入框双向绑定能用v-if / v-show控制内容显示隐藏能用v-for渲染列表知道key不能随便省略如果这些你已经能独立敲出来那说明你已经真正迈进 Vue3 模板层的门了。十三、总结这一篇文章我们把 Vue3 最常用的模板语法和基础指令系统过了一遍。核心内容其实可以浓缩成下面几句话{{ }}把数据显示到页面内容中v-bind/:把数据绑定到标签属性上click给页面元素绑定事件v-model实现表单双向绑定v-if / v-show控制元素显示与隐藏v-for根据数组数据批量渲染页面key给列表中的每一项一个稳定身份标识如果说 Vue3 最核心的思想之一是“数据驱动视图”那么这一篇其实就是你第一次真正开始把这个思想落实到代码里。因为从现在开始你写页面时思路不再只是页面长什么样而要开始变成页面显示哪些数据数据变化时页面如何自动更新用户操作后数据怎么联动变化这就是 Vue 开始和普通静态页面拉开差距的地方。