一、前言
前三篇环境、工具、构建全部就位，今天正式写"Vue 的代码"------模板语法。这是 Vue 的门面担当：插值表达式 {{ }}、属性绑定 v-bind、事件绑定 v-on。学完今天，页面就能"动"起来了。
二、插值表达式 {{ }}：把数据放到页面上
双大括号语法，是 Vue 最基础的输出方式，作用：把 script 里的数据渲染到模板中。
vue
<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：
vue
<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>记忆口诀：大括号管内容，冒号管属性。
试一下它的"动态"威力------点按钮换图片：
vue
<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 监听事件：
vue
<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 鼠标移入。
五、综合实战：一个迷你计数器
三个语法合体，写个完整可跑的小案例：
vue
<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 响应式基础。