登录
从零开始，学习所有指令！
哈喽大家好，我是心连欣。在 Vue.js 的世界里，我们不再直接操作 DOM（比如 document.getElementById），而是通过操作 数据（Data） 来驱动 视图（View） 的变化。今天，我们就通过四个具体的场景，来看看 Vue 是如何做到这一点的。
1. 视觉控制：v-show (条件渲染)
核心思想： 用数据控制元素的“显”与“隐”。
还记得小时候玩的“躲猫猫”吗？v-show 就像是一个开关，控制着元素是否在页面上显示。
-
原理： 根据表达式的真假（true/false），切换元素的 CSS
display属性。 - 适用场景： 需要频繁切换显示状态的元素。
案例解析：控制图片显隐
在这个案例中，我们通过一个布尔值 isshow 来控制图片。
- 初始状态
isshow: false，图片隐藏。 - 点击按钮时，执行
changeisshow方法，利用!取反操作符，让true变false，图片状态随之切换。
效果如下：
2. 批量处理：v-for (列表渲染)
核心思想： 用数据控制元素的“生”与“灭”。
当数据不再是单一的字符串，而是一组数据（数组或对象）时，v-for 就派上用场了。它能帮我们循环生成 DOM 结构，比如列表、表格等。
案例解析：旅游清单与美食菜单
在这个案例中，我们展示了两种用法：
-
遍历数组：
arr存储了省份信息，v-for="(it, index) in arr"拿到了每一项和索引。 -
遍历对象数组：
vegetables是一个对象数组。点击“添加”按钮时，push方法将新数据追加到数组末尾，Vue 会自动帮我们生成新的<li>标签。
效果如下：
3. 交互响应：v-on (事件监听)
核心思想： 监听用户的操作，执行对应的逻辑。
光有界面是不够的，网页必须能响应用户的点击、双击、鼠标移动等行为。v-on 指令（简写为 @）就是连接用户操作与 JavaScript 代码的桥梁。
案例解析：按钮与文本更新
这里我们监听了三种事件：
-
@click：单击按钮，弹出警告框。 -
@dblclick：双击按钮，也触发同一个函数。 -
@mouseenter：鼠标移入时触发。
同时，我们还演示了如何修改数据来更新视图：点击标题时，changefood 方法修改了 food 字符串，页面上的文字立刻就变了。
效果如下：
这几个指令分别代表了 Vue 的四种核心能力：条件渲染、列表渲染、事件监听 和 双向数据绑定。
为了帮你梳理知识体系，我将你提供的四个案例整合成了一篇结构化的学习笔记。这篇文章不仅展示了代码，还解析了它们背后的逻辑，希望能帮你把零散的知识点串联起来。
🚀 Vue 2 核心指令实战：从数据到界面的魔法
在 Vue.js 的世界里，我们不再直接操作 DOM（比如 document.getElementById），而是通过操作 数据（Data） 来驱动 视图（View） 的变化。今天，我们就通过四个具体的场景，来看看 Vue 是如何做到这一点的。
1. 视觉控制：v-show (条件渲染)
核心思想： 用数据控制元素的“显”与“隐”。
还记得小时候玩的“躲猫猫”吗？v-show 就像是一个开关，控制着元素是否在页面上显示。
-
原理： 根据表达式的真假（true/false），切换元素的 CSS
display属性。 - 适用场景： 需要频繁切换显示状态的元素。
案例解析：控制图片显隐
在这个案例中，我们通过一个布尔值 isshow 来控制图片。
- 初始状态
isshow: false，图片隐藏。 - 点击按钮时，执行
changeisshow方法，利用!取反操作符，让true变false，图片状态随之切换。
html
预览
<!-- 模板部分 -->
<div id="app">
<!-- v-show 绑定 data 中的 isshow -->
<img v-show="isshow" src="/曾婉之宝宝/image/2.jpg" alt="">
<!-- @click 是 v-on:click 的缩写 -->
<input type="button" value="点击切换显示状态" @click="changeisshow">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isshow: false // 数据驱动视图
},
methods: {
changeisshow: function(){
// 修改数据，视图自动更新
this.isshow = !this.isshow;
}
}
})
</script>
2. 批量处理：v-for (列表渲染)
核心思想： 用数据控制元素的“生”与“灭”。
当数据不再是单一的字符串，而是一组数据（数组或对象）时，v-for 就派上用场了。它能帮我们循环生成 DOM 结构，比如列表、表格等。
案例解析：旅游清单与美食菜单
在这个案例中，我们展示了两种用法：
-
遍历数组：
arr存储了省份信息，v-for="(it, index) in arr"拿到了每一项和索引。 -
遍历对象数组：
vegetables是一个对象数组。点击“添加”按钮时，push方法将新数据追加到数组末尾，Vue 会自动帮我们生成新的<li>标签。
html
预览
<!-- 模板部分 -->
<div id="app">
<!-- 遍历数组 -->
<ul>
<li v-for="(it, index) in arr">
{{ index+1 }}我最喜欢的地方：{{ it }}
</li>
</ul>
<!-- 遍历对象数组，并动态绑定title属性 -->
<h2 v-for="item in vegetables" v-bind:title="item.name">
{{ item.name }}
</h2>
<!-- 按钮触发方法 -->
<input type="button" value="添加" @click="add">
<input type="button" value="删除" @click="remove">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
arr: ["重庆", "四川", "云南", "贵州"],
vegetables: [
{ name: "番茄炒鸡蛋" },
{ name: "鸡蛋炒番茄" }
]
},
methods: {
add() {
// 修改数组，视图自动更新列表
this.vegetables.push({ name: "土豆炒马铃薯" });
},
remove() {
this.vegetables.shift();
}
}
})
</script>
3. 交互响应：v-on (事件监听)
核心思想： 监听用户的操作，执行对应的逻辑。
光有界面是不够的，网页必须能响应用户的点击、双击、鼠标移动等行为。v-on 指令（简写为 @）就是连接用户操作与 JavaScript 代码的桥梁。
案例解析：按钮与文本更新
这里我们监听了三种事件：
-
@click：单击按钮，弹出警告框。 -
@dblclick：双击按钮，也触发同一个函数。 -
@mouseenter：鼠标移入时触发。
同时，我们还演示了如何修改数据来更新视图：点击标题时，changefood 方法修改了 food 字符串，页面上的文字立刻就变了。
html
预览
<!-- 模板部分 -->
<div id="app">
<!-- 监听 click 事件 -->
<input type="button" value="单击" @click="doIt">
<!-- 监听 dblclick 事件 -->
<input type="button" value="双击" @dblclick="doIt">
<!-- 监听 mouseenter 事件 -->
<input type="button" value="鼠标" @mouseenter="doIt">
<!-- 点击修改数据 -->
<h2 @click="changefood">{{ food }}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
food: '番茄炒鸡蛋'
},
methods: {
doIt() {
alert('学习It'); // 执行业务逻辑
},
changefood() {
// 修改数据
this.food += '好吃！';
}
}
})
</script>
4. 数据同步：v-model (双向数据绑定)
核心思想： 数据变了，界面变；界面变了，数据也变。
这是 Vue 最神奇的特性之一。在传统的开发中，我们要想获取输入框的内容，必须手动去 DOM 里取。而在 Vue 中，v-model 像一根双向的管道，把输入框的值和数据对象紧紧绑定在一起。
案例解析：文本输入与回车事件
在这个例子中：
- 输入框绑定了
msg数据。当你在输入框打字时，msg的值在内存中实时改变。 - 页面上的
<h1>{{ msg }}</h1>实时显示这个值。 -
修饰符实战： 我们用了
@keyup.enter，意思是只有当用户按下“回车键”时，才触发getM方法弹出警告。这展示了 Vue 如何优雅地处理键盘事件。
效果如下：
核心指令对比总结
| 指令 | 作用 | 核心逻辑 | 典型场景 |
|---|---|---|---|
| v-show | 条件渲染 |
display: none / block
|
开关、选项卡 |
| v-for | 列表渲染 | 循环生成 DOM | 商品列表、表格数据 |
| v-on | 事件监听 | 监听用户行为 | 按钮点击、表单提交 |
| v-model | 双向绑定 | 数据 ↔ 视图 | 表单输入、搜索框 |
| 这些是基础的，简单的实例，让我们继续努力学习吧！😊😊😊 |
