1-2 模板语法与指令

配套 Demo

在线运行：1-2-directives

「指令(Directive)」是 Vue 模板里以 v- 开头的特殊属性,用来把数据和界面行为绑定起来。本章把最常用的几个一次讲透。学完你就能写出真正能交互的页面。

配套 demo:demo/1-2-directives.html,一个页面演示全部指令。

---

1. 插值与表达式

<p>{{ name }}</p>                 <!-- 显示数据 -->
<p>{{ price * count }}</p>        <!-- 可以写表达式 -->
<p>{{ ok ? '是' : '否' }}</p>     <!-- 三元运算也行 -->

里能放单个表达式,但别写复杂逻辑(那是 computed 的活,下一章讲)。

---

2. v-bind(简写 :)—— 绑定属性

只能用在标签内容里。要动态设置标签的属性(如 src、href、class),用 v-bind:

<img v-bind:src="imageUrl">       <!-- 完整写法 -->
<img :src="imageUrl">             <!-- 简写,推荐 -->
<a :href="url">链接</a>
<button :disabled="isLoading">提交</button>  <!-- 动态禁用 -->

口诀:内容用 ,属性用 :。

动态 class(超常用)

<!-- 对象语法:key 是类名,value 是布尔,true 才加上这个类 -->
<div :class="{ active: isActive, error: hasError }"></div>

<!-- isActive 为 true 时,渲染成 <div class="active"> -->

动态 style

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

---

3. v-on(简写 @)—— 绑定事件

<button v-on:click="handleClick">点我</button>  <!-- 完整 -->
<button @click="handleClick">点我</button>       <!-- 简写,推荐 -->

<input @input="onInput">       <!-- 输入事件 -->
<form @submit="onSubmit">      <!-- 提交事件 -->

事件修饰符(很方便)

<form @submit.prevent="onSubmit">  <!-- .prevent 阻止表单默认刷新页面 -->
<div @click.stop="...">            <!-- .stop 阻止事件冒泡 -->
<input @keyup.enter="search">      <!-- 只在按回车时触发 -->

.prevent 在表单里几乎必加,否则点提交浏览器会刷新整页。

传参

<button @click="say('hello')">说</button>
<button @click="remove(item.id)">删除</button>

---

4. v-if / v-else —— 条件渲染

按条件决定渲染或不渲染某段 DOM:

<p v-if="score >= 60">及格 🎉</p>
<p v-else>不及格</p>

<div v-if="status === 'loading'">加载中…</div>
<div v-else-if="status === 'error'">出错了</div>
<div v-else>加载完成</div>

v-show vs v-if

<p v-show="visible">我用 display 控制显示隐藏</p>

• v-if:条件为假时根本不渲染(DOM 里没有它)。适合不常切换的。
• v-show:始终渲染,只是用 CSS display:none 藏起来。适合频繁切换的。

后端类比:v-if 像「根本不返回这段数据」;v-show 像「返回了但标记为隐藏」。

---

5. v-for —— 列表渲染(最重要!)

把数组渲染成一串元素。前端列表 99% 靠它。

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

const list = ref([
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橙子' },
]);

关于 :key(必须加!)

每个循环项要加一个唯一的 :key(通常用数据的 id)。这是给 Vue 用来高效追踪每一项的「身份证」。不加 key 会有性能问题和诡异 bug,务必养成习惯。

<li v-for="item in list" :key="item.id">...</li>  <!-- ✅ 用唯一 id -->

拿到索引

<li v-for="(item, index) in list" :key="item.id">
  {{ index + 1 }}. {{ item.name }}
</li>

后端类比:v-for 就是 0-3 学的 map——把数据数组「映射」成界面元素数组。

---

6. v-model —— 双向绑定(表单神器)

让输入框和数据双向同步:你改数据,输入框变;你在输入框里打字,数据也变。

<input v-model="username">
<p>你输入的是:{{ username }}</p>

const username = ref('');

边打字,下面的 实时跟着变。省掉了「监听 input 事件 + 手动取值 + 手动赋值」一大堆代码。

各种表单都支持:

<input type="checkbox" v-model="agree">      <!-- 复选框,绑布尔 -->
<input type="radio" value="A" v-model="pick"> <!-- 单选 -->
<select v-model="city">                        <!-- 下拉 -->
  <option>深圳</option>
  <option>北京</option>
</select>
<textarea v-model="remark"></textarea>

v-model 本质 = :value 绑定 + @input 更新的语法糖。理解这点,以后自定义组件的 v-model 才不懵(第 1-4 章会再提)。

---

动手练习(用 demo/1-2-directives.html)

demo 里有一个迷你「待办列表」,综合用到了上面所有指令:

1. 在输入框打字,看顶部实时回显(v-model)。
2. 点「添加」,新项出现在列表(v-for + 数组操作)。
3. 勾选某项,文字出现删除线(动态 :class)。
4. 点「删除」移除该项。
5. 试着把「全部完成」时显示的恭喜文字改一下(v-if)。

---

小结(指令速查表)

指令	简写	作用
v-bind:attr	:attr	动态绑定属性
v-on:event	@event	绑定事件
v-if/v-else	—	条件渲染(不满足就不存在)
v-show	—	条件显示(用 display 隐藏)
v-for	—	列表渲染(必加 :key)
v-model	—	表单双向绑定

记住三个最常用口诀:内容 、属性 :、事件 @。

➡️ 下一章:1-3 响应式 API:ref/reactive/computed/watch