前端核心框架vue之(指令篇1/5)
📝 Vue 指令入门教程
🧠 一、什么是 Vue 指令？（入门解释）
✅ 一句话解释：
指令就是“Vue 自带的特殊标签属性”，用来快速实现常见功能（如绑定数据、事件、显示隐藏等），不用写复杂原生 JS 代码。
✅ 举例理解：
网页开发中常见需求，用指令能直接搞定：
- 把变量显示到页面上 → 用
{{ }}（插值指令简化） - 给按钮加点击事件 → 用
v-on:click - 控制元素显示/隐藏 → 用
v-if - 循环生成列表 → 用
v-for
👉 类比：指令就像“现成的工具”，不用自己“造轮子”，拿过来就能用。
🔍 二、指令的识别特征（一眼认出它）
Vue 指令有三个明显标志，不会和普通 HTML 属性混淆：
- 前缀固定：都以
v-开头（如v-if、v-for、v-bind） - 位置固定：写在 HTML 标签的属性位置（如
<div v-if="isShow">） - 值关联数据：指令的值通常是 Vue 实例里的变量或表达式（如
v-if="isShow"中的isShow是 data 里的变量）
| 指令示例 | 作用 | 特征体现 |
|---|---|---|
{{ message }} | 显示变量（插值语法，指令简化） | 双大括号包裹，关联变量 |
v-bind:src="imgUrl" | 绑定标签属性 | v- 开头，值为变量 |
v-on:click="handleClick" | 绑定事件 | v- 开头，值为方法名 |
v-for="item in list" | 循环生成元素 | v- 开头，值为循环表达式 |
🚀 三、最常用的 6 个核心指令（必学，附案例）
1️⃣ 插值表达式 {{ }}（显示数据，指令简化版）
✅ 作用：
把 Vue 实例中的变量或表达式结果，显示到页面标签的内容区域。
✅ 基础案例：
<template><div><!-- 显示变量 --><p>用户名：{{ username }}</p><!-- 显示表达式计算结果 --><p>10 + 20 = {{ 10 + 20 }}</p><!-- 显示三元运算结果 --><p>登录状态：{{ isLogin ? '已登录' : '未登录' }}</p><!-- 显示方法返回值 --><p>欢迎语：{{ getWelcome() }}</p></div>
</template><script>
export default {data() {return {username: '张三',isLogin: true}},methods: {getWelcome() {return `欢迎你，${this.username}！`;}}
}
</script>
💡 注意事项：
- 只能用在标签内容里（如
<p>{{ }}</p>），不能用在标签属性上（如<img src="{{ imgUrl }}">是错误的，需用v-bind）； - 支持简单表达式（加减、三元、方法调用），但不支持复杂逻辑（如
if语句、循环，复杂逻辑需在methods或computed中处理）。
2️⃣ v-bind（绑定标签属性，缩写 :）
✅ 作用：
把 Vue 变量的值，绑定到 HTML 标签的属性上（如 src、class、style、href 等）。
✅ 基础案例：
<template><div><!-- 绑定图片 src 属性 --><img v-bind:src="imgUrl" alt="风景图" width="300"><!-- 绑定链接 href 属性 --><a v-bind:href="linkUrl">跳转到百度</a><!-- 缩写：v-bind: 可以简化成 : --><img :src="imgUrl" alt="风景图" width="300"><a :href="linkUrl">跳转到百度</a></div>
</template><script>
export default {data() {return {imgUrl: 'https://picsum.photos/200/300', // 随机图片链接linkUrl: 'https://www.baidu.com'}}
}
</script>
✅ 进阶：绑定 class 和 style
<template><div><!-- 绑定 class：对象形式（控制是否添加类） --><div :class="{ active: isActive, red: isRed }">动态类名</div><!-- 绑定 style：对象形式（控制行内样式） --><div :style="{ fontSize: fontSize + 'px', color: textColor }">动态样式</div></div>
</template><script>
export default {data() {return {isActive: true, // 为 true 时添加 active 类isRed: false, // 为 false 时不添加 red 类fontSize: 16, // 字体大小 16pxtextColor: 'blue' // 字体颜色蓝色}}
}
</script><style>
.active { border: 1px solid #000; }
.red { color: red; }
</style>
3️⃣ v-on（绑定事件，缩写 @）
✅ 作用：
给 HTML 标签绑定事件（如点击、输入、鼠标移动等），触发 Vue 实例中的方法。
✅ 基础案例：
<template><div><!-- 绑定点击事件：调用 handleClick 方法 --><button v-on:click="handleClick">点击我</button><!-- 缩写：v-on: 可以简化成 @ --><button @click="handleClick">点击我（缩写）</button><!-- 传递参数：事件触发时传值给方法 --><button @click="handleAdd(10)">加 10</button><!-- 传递事件对象 $event --><button @click="handleEvent($event)">获取事件对象</button></div>
</template><script>
export default {data() {return {count: 0}},methods: {handleClick() {alert('按钮被点击了！');},handleAdd(num) {this.count += num;alert(`当前计数：${this.count}`);},handleEvent(e) {// e 是原生事件对象，可获取目标元素、鼠标位置等console.log('点击的元素：', e.target);}}
}
</script>
✅ 常用事件类型：
| 事件指令 | 对应原生事件 | 作用场景 |
|---|---|---|
@click | click | 按钮点击、元素点击 |
@input | input | 输入框内容变化 |
@change | change | 下拉框选择变化、复选框切换 |
@submit.prevent | submit（阻止默认） | 表单提交（阻止页面刷新） |
4️⃣ v-if / v-else-if / v-else（条件显示）
✅ 作用：
根据变量的“真假”，控制元素是否存在于 DOM 中（不是隐藏，是直接添加/删除元素）。
✅ 基础案例：
<template><div><p>登录状态：{{ isLogin }}</p><!-- isLogin 为 true 时显示 --><div v-if="isLogin"><p>欢迎回来，{{ username }}！</p><button @click="isLogin = false">退出登录</button></div><!-- isLogin 为 false 时显示 --><div v-else><p>请先登录</p><button @click="isLogin = true">登录</button></div><!-- 多条件判断：v-else-if --><div v-if="score >= 90">成绩：优秀</div><div v-else-if="score >= 60">成绩：及格</div><div v-else>成绩：不及格</div></div>
</template><script>
export default {data() {return {isLogin: true,username: '张三',score: 85}}
}
</script>
💡 注意事项：
v-if/v-else-if/v-else必须连续写在一起，中间不能插入其他元素，否则v-else会失效；- 频繁切换显示/隐藏时，推荐用
v-show（下面讲），因为v-if会频繁操作 DOM，性能较差。
5️⃣ v-show（条件隐藏）
✅ 作用：
根据变量的“真假”，控制元素是否显示（元素始终存在于 DOM 中，只是通过 display: none 隐藏）。
✅ 案例对比（v-if vs v-show）：
<template><div><!-- v-show：频繁切换用这个 --><button @click="showBox = !showBox">切换 v-show 显示</button><div v-show="showBox" style="width: 100px; height: 100px; background: red;"></div><!-- v-if：不频繁切换用这个 --><button @click="hasBox = !hasBox">切换 v-if 存在</button><div v-if="hasBox" style="width: 100px; height: 100px; background: blue;"></div></div>
</template><script>
export default {data() {return {showBox: true, // v-show 控制的显示状态hasBox: true // v-if 控制的存在状态}}
}
</script>
💡 核心区别（必记）：
| 对比项 | v-if | v-show |
|---|---|---|
| DOM 存在性 | 条件为 false 时，元素从 DOM 移除 | 元素始终在 DOM 中，只是隐藏 |
| 切换性能 | 差（频繁操作 DOM） | 好（仅修改 CSS 的 display） |
| 适用场景 | 不频繁切换（如登录/未登录状态） | 频繁切换（如tab页、开关按钮） |
6️⃣ v-for（循环生成元素）
✅ 作用：
根据数组或对象，循环生成重复的 HTML 元素（如列表、表格行）。
✅ 基础案例：循环数组
<template><div><h3>水果列表</h3><!-- 循环数组：item 是当前项，index 是索引（可选） --><ul><li v-for="(item, index) in fruitList" :key="index">{{ index + 1 }}. {{ item }}</li></ul><h3>用户列表</h3><!-- 循环对象数组：item 是每个用户对象 --><table border="1" width="300"><tr><th>姓名</th><th>年龄</th></tr><tr v-for="user in userList" :key="user.id"><td>{{ user.name }}</td><td>{{ user.age }}</td></tr></table></div>
</template><script>
export default {data() {return {// 普通数组fruitList: ['苹果', '香蕉', '橙子'],// 对象数组（实际开发常用）userList: [{ id: 1, name: '张三', age: 20 },{ id: 2, name: '李四', age: 22 },{ id: 3, name: '王五', age: 18 }]}}
}
</script>
✅ 进阶：循环对象
<template><div><h3>用户信息（循环对象）</h3><!-- 循环对象：value 是属性值，key 是属性名，index 是索引（可选） --><ul><li v-for="(value, key, index) in userInfo" :key="key">{{ index + 1 }}. {{ key }}：{{ value }}</li></ul></div>
</template><script>
export default {data() {return {userInfo: {name: '张三',age: 20,gender: '男'}}}
}
</script>
💡 关键：key 属性的作用（必加）
- 循环时必须给每个生成的元素加
:key="唯一值"，Vue 会通过key识别元素的唯一性，优化渲染性能（避免重复渲染）； - 推荐用数据自身的唯一标识（如
user.id）作为key，不推荐用index（索引会随数组删除/插入变化，导致性能问题）。
7️⃣ v-model（表单双向绑定）
✅ 作用：
实现“表单输入”和“Vue 变量”的双向同步——输入框内容变，变量值变；变量值变，输入框内容也变。
✅ 基础案例：
<template><div><!-- 输入框双向绑定 --><p>用户名：{{ username }}</p><input type="text" v-model="username" placeholder="请输入用户名"><!-- 复选框双向绑定（布尔值） --><p>是否同意：{{ isAgree }}</p><input type="checkbox" v-model="isAgree"> 同意协议<!-- 下拉框双向绑定 --><p>选中的城市：{{ selectedCity }}</p><select v-model="selectedCity"><option value="">请选择</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option></select></div>
</template><script>
export default {data() {return {username: '', // 输入框绑定的变量isAgree: false, // 复选框绑定的变量selectedCity: '' // 下拉框绑定的变量}}
}
</script>
💡 原理（大白话）：
v-model 本质是 v-bind（绑定表单值）和 v-on:input（监听输入事件）的语法糖，等价于：
<!-- v-model 简写 -->
<input v-model="username"><!-- 等价于下面的完整写法 -->
<input :value="username" @input="username = $event.target.value">
🧪 四、传统 JS 写法 vs Vue 指令写法（对比）
🚫 传统 JS 写法（繁琐，需手动操作 DOM）
<!-- HTML -->
<input type="text" id="usernameInput">
<p id="usernameText"></p><script>
// 1. 获取 DOM 元素
const input = document.getElementById('usernameInput');
const text = document.getElementById('usernameText');// 2. 监听输入事件，手动更新文本
input.addEventListener('input', function() {text.innerText = '用户名：' + this.value;
});
</script>
✅ Vue 指令写法（简洁，无需操作 DOM）
<template><input type="text" v-model="username"><p>用户名：{{ username }}</p>
</template><script>
export default {data() {return {username: ''}}
}
</script>
📌 核心差异：
| 对比项 | 传统 JS 写法 | Vue 指令写法 |
|---|---|---|
| DOM 操作 | 手动获取、更新 DOM | 不用 |