一、前言
前三篇环境、工具、构建全部就位，今天正式写"Vue 的代码"——模板语法。这是 Vue 的门面担当：插值表达式 {{ }}、属性绑定 v-bind、事件绑定 v-on。学完今天，页面就能"动"起来了。
二、插值表达式 {{ }}：把数据放到页面上
双大括号语法，是 Vue 最基础的输出方式，作用：把 script 里的数据渲染到模板中。
<template> <!-- 1. 基础用法：渲染变量 --> <p>姓名：{{ name }}</p> <!-- 2. 大括号里可以写简单的 JS 表达式 --> <p>年龄：{{ age + 1 }}</p> <p>大写名字：{{ name.toUpperCase() }}</p> <p>是否成年：{{ age >= 18 ? '是' : '否' }}</p> <!-- 3. 错误示范：大括号里只能写表达式，不能写语句 --> <!-- <p>{{ if (age > 18) { return '成年' } }}</p> --> </template> <script setup> import { ref } from 'vue' const name = ref('小明') const age = ref(17) </script>三个必须记住的规则：
- 大括号里放表达式（有返回值），不能放
if、for这类语句 - 属性值里的
{{ }}无效，属性要用下面的 v-bind ref定义的数据在模板里直接写名字，不用 .value（下一篇细讲为什么）
三、v-bind：给属性动态绑定数据
插值表达式管不了 HTML 属性。想让src、href、class也跟着数据变，就得用v-bind：
<template> <!-- 完整写法 --> <a v-bind:href="url">去 Vue 官网</a> <!-- 语法糖：冒号缩写，实际项目 99% 都这么写 --> <img :src="imgUrl" :alt="title" /> <!-- 绑定的值可以是表达式拼接 --> <img :src="'https://cdn.xxx.com/' + imgName" /> </template> <script setup> import { ref } from 'vue' const url = ref('https://cn.vuejs.org') const imgUrl = ref('/logo.png') const title = ref('网站logo') const imgName = ref('banner.jpg') </script>记忆口诀：大括号管内容，冒号管属性。
试一下它的"动态"威力——点按钮换图片：
<template> <img :src="src" width="300" /> <button @click="src = '/img2.png'">换图</button> </template> <script setup> import { ref } from 'vue' const src = ref('/img1.png') </script>数据一变，属性立刻跟着变——这就是数据驱动视图，Vue 的核心思想。
四、v-on：绑定事件
用户点击、输入、鼠标移动时执行代码，用v-on监听事件：
<template> <!-- 完整写法 --> <button v-on:click="count++">完整写法：点我 {{ count }}</button> <!-- 语法糖 @：实际项目 99% 都这么写 --> <button @click="count++">语法糖：点我 {{ count }}</button> <!-- 事件处理逻辑复杂时，封装成函数 --> <button @click="add">加 10</button> </template> <script setup> import { ref } from 'vue' const count = ref(0) function add() { count.value += 10 } </script>两个关键区别：
@click="count++"：直接写表达式，一行搞定@click="add"：逻辑复杂就写函数名，注意函数名不加括号，加了括号是"立刻执行"，不加是"点击时才执行"（新手高频坑，第七节详解）
常用事件速查：@click点击、@input输入、@change值变化、@keyup按键抬起、@mouseenter鼠标移入。
五、综合实战：一个迷你计数器
三个语法合体，写个完整可跑的小案例：
<template> <h1>{{ title }}</h1> <p :style="{ color: count > 0 ? 'green' : 'red' }"> 当前计数：{{ count }} </p> <button @click="count++">+1</button> <button @click="reset">归零</button> </template> <script setup> import { ref } from 'vue' const title = ref('我的第一个交互页面') const count = ref(0) function reset() { count.value = 0 } </script>运行后：点 +1 数字变绿，归零后数字变红。v-bind负责颜色、{{ }}负责数字、v-on负责响应点击——三兄弟各司其职。
【截图位置：点击按钮后计数变绿、归零变红的运行效果】
六、今日小结
{{ }}渲染数据，只能写表达式不能写语句v-bind（缩写:）绑定属性；v-on（缩写@）绑定事件- 数据变 → 视图自动变，这就是数据驱动
@click="fn"传函数名不加括号
作者：陈志宝
下篇预告
ref到底是什么？为什么 script 里要.value、模板里又不用？下一篇讲透 Vue3 响应式的第一块基石：ref 响应式基础。
