vue-day01
目录
1课程介绍
2vue快速导学
3创建一个vue实例
问题
4差值表达式
5vue响应式特性
6vue开发者工具
7vue指令
问题
8v-show和v-if
问题
9v-else和v-else-if
10v-on:
问题
问题
11v-bind
12图片切换案例
编辑
问题：
13v-for
14图书管理案例
问题
15v-model
16小黑记事本案例
渲染和删除
添加功能
底部统计和清空
问题
总结
1课程介绍
2vue快速导学
3创建一个vue实例
问题
在vue中,script里面的app变量是不是对应上面div 的id？
是的；在这段代码中，const app = new Vue({ el: '#app' }) 里的 el: '#app' 表示将 Vue 实例与页面上 id="app" 的 div 元素进行关联。也就是说，这个 Vue 实例（通过 app 变量引用）会管理 id 为 app 的 div 及其内部的所有 Vue 模板语法（比如插值表达式 {{ }}），实现数据的渲染和交互。所以它只会管理这个id为app的<div>标签
4差值表达式
5vue响应式特性
6vue开发者工具
7vue指令
问题
差值表达式不具备解析标签的能力?那该怎么办？
使用v-html
8v-show和v-if
问题
这俩区别？
9v-else和v-else-if
10v-on:
问题
v-on:可以替换成@
问题
记得用this,要不然使用app4的时候只要修改名字,里面都得修改
11v-bind
12图片切换案例
问题：
这个index确实不会,就是不知道如何给img标签的:src里面的list数组如何传参？
13v-for
14图书管理案例
问题
1使用这个fileter过滤器后记得赋值给原数组,因为过滤器不会改变原数组
2v-for中的key
15v-model
如登录和重置
16小黑记事本案例
渲染和删除
添加功能
底部统计和清空
问题
注意渲染时候,使用的是index,而不是id,要不然经过删除后可能会出现1,5,9这样的顺序,所以使用数组的下标
总结
如果上面看的明白,这里不用看
Vue 核心知识点全解析：从基础到实战的系统化学习指南
Vue 作为前端三大框架之一，以其简洁的语法、高效的响应式机制和丰富的生态系统，成为开发者入门前端框架的首选。本文将围绕课程目录中的核心知识点，从 Vue 实例创建、模板语法、响应式特性、开发者工具、指令系统到实战案例，进行全方位的剖析，帮助读者构建完整的 Vue 知识体系。
一、Vue 快速入门与实例创建
1. 课程介绍与 Vue 快速导学
Vue 是由尤雨溪开发的渐进式 JavaScript 框架，“渐进式” 意味着开发者可以根据需求逐步引入 Vue 的功能，无需一次性全盘接纳。它的核心优势在于响应式数据绑定和组件化开发，既适合小型项目的快速开发，也能支撑大型应用的复杂架构。
在快速导学阶段，需掌握 Vue 的核心概念：
实例：Vue 应用的基本单元，通过new Vue()创建，是管理数据、模板和方法的载体。
模板：Vue 用于渲染页面的 HTML 片段，支持插值、指令等特殊语法。
响应式系统：Vue 自动追踪数据变化并更新 DOM 的机制，是其 “智能” 的核心。
2. 创建一个 Vue 实例
创建 Vue 实例是使用 Vue 的第一步，其基本语法如下：
javascript
运行
const vm = new Vue({
el: '#app', // 挂载到页面的DOM元素，指定Vue管理的区域
data: { // 存储响应式数据
message: 'Hello Vue!'
},
methods: { // 定义方法，用于处理交互逻辑
showMessage() {
alert(this.message);
}
}
});
el 选项：指定 Vue 实例挂载的 DOM 节点，通常是一个带有唯一id的元素（如div#app）。只有挂载后，Vue 才能管理该区域的模板渲染和事件监听。
data 选项：存储组件的响应式数据，Vue 会对data中的属性进行 “劫持”，当数据变化时自动更新视图。
实例与数据的关系：Vue 实例代理了data中的属性，可通过vm.message直接访问data里的message，无需手动写vm.data.message。
常见问题解析：
“Vue 实例挂载后能否修改 el？”
不能。Vue 实例一旦挂载，el就不可更改，若需更换挂载目标，需创建新的 Vue 实例。
“data 为什么推荐是函数？”
在组件中，data必须是函数（每个组件实例维护独立的data副本）；在根实例中，data可以是对象。这是为了避免组件复用导致的数据污染。
二、模板语法与响应式特性
1. 插值表达式（差值表达式）
插值表达式是 Vue 模板中最基础的语法，用于将数据渲染到 DOM 中，语法为{{ 表达式 }}。
html
预览
<div id="app">
{{ message }} <!-- 渲染data中的message -->
{{ 1 + 2 }} <!-- 支持简单的JavaScript表达式 -->
{{ isShow ? '显示' : '隐藏' }} <!-- 三元运算符 -->
</div>
作用：实现数据与视图的单向绑定，将data中的数据插入到模板指定位置。
限制：只能写表达式（有返回值的语句），不能写语句（如if、for）。
进阶用法：结合v-text（纯文本渲染）、v-html（解析 HTML）指令，可满足更复杂的文本渲染需求。
2. Vue 响应式特性
Vue 的响应式系统是其核心竞争力，它基于Object.defineProperty（Vue 2）或Proxy（Vue 3）实现数据劫持，当数据变化时自动更新视图。
响应式原理核心流程：
初始化阶段：Vue 对data中的每个属性进行 “劫持”，为其添加getter和setter。
依赖收集：当模板渲染时，读取数据会触发getter，Vue 会记录当前组件的渲染函数与该数据的依赖关系。
数据更新阶段：当数据通过setter修改时，Vue 会触发所有依赖该数据的渲染函数重新执行，从而更新 DOM。
常见问题与注意事项：
“为什么直接给对象新增属性不触发响应式？”
因为 Vue 初始化时仅对data中已存在的属性进行了劫持，新增属性需使用Vue.set(vm.obj, 'newKey', value)或vm.$set(vm.obj, 'newKey', value)。
“数组的哪些方法是响应式的？”
Vue 对数组的push、pop、shift、unshift、splice、sort、reverse这 7 个方法进行了重写，调用这些方法会触发视图更新；而直接通过索引修改数组元素（如vm.arr[0] = 1）不会触发响应式，需改用splice或$set。
三、Vue 开发者工具与指令系统
1. Vue 开发者工具（Vue Devtools）
Vue Devtools 是 Vue 官方提供的浏览器扩展（支持 Chrome、Firefox 等），是调试 Vue 应用的必备工具，主要功能包括：
组件树查看：可视化展示 Vue 应用的组件层级结构，可查看每个组件的data、props、computed等。
数据监听：实时监控data、vuex状态的变化，便于追踪数据流向。
性能分析：检测组件渲染次数和时间，优化应用性能。
使用注意事项：
仅在开发环境生效，生产环境会自动禁用。
需确保 Vue 版本与 Devtools 版本兼容（Vue 2 对应经典版 Devtools，Vue 3 对应新版）。
若工具不显示，可检查是否开启 “允许访问文件网址”（本地file://协议页面需开启此选项）。
2. Vue 指令系统
Vue 指令是带有v-前缀的特殊属性，用于在模板中添加交互逻辑、控制 DOM 行为，是 Vue 模板语法的核心组成部分。
基础指令解析：
v-show 与 v-if：
v-show：通过display: none控制元素显示 / 隐藏，初始渲染时会加载元素，适合频繁切换的场景。
v-if：通过 DOM 的创建 / 销毁控制显示 / 隐藏，初始渲染时不加载元素，适合切换频率低的场景。
两者差异：v-if是 “真正的条件渲染”，v-show是 “视觉上的隐藏”；v-if可与v-else、v-else-if配合使用，v-show不支持。
v-on：用于绑定事件监听器，语法为v-on:事件名="方法"，可简写为@事件名="方法"。
html
预览
<button v-on:click="handleClick">点击</button>
<button @click="handleClick">点击（简写）</button>
<button @click="handleClick('参数', $event)">带参点击</button>
支持的事件包括点击、输入、键盘、鼠标等，还可结合事件修饰符（如.stop阻止冒泡、.prevent阻止默认行为）和按键修饰符（如.enter监听回车键）使用。
v-bind：用于绑定 HTML 属性或组件props，语法为v-bind:属性名="表达式"，可简写为:属性名="表达式"。
html
预览
<img v-bind:src="imgUrl" :alt="imgAlt"> <!-- 绑定图片地址和alt属性 -->
<a :href="linkUrl" target="_blank">跳转</a> <!-- 绑定链接地址 -->
支持绑定class和style，可实现动态样式切换：
html
预览
<!-- 绑定class -->
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<!-- 绑定style -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
四、实战案例：从基础到综合应用
1. 图片切换案例
图片切换是 Vue 基础实战的经典场景，主要涉及数据绑定和事件处理，步骤如下：
定义数据：在data中声明图片数组imgList和当前索引currentIndex。
模板渲染：用v-bind绑定img的src属性，显示当前图片；用v-on绑定 “上一张”“下一张” 按钮的点击事件。
逻辑实现：在methods中定义prev和next方法，修改currentIndex实现图片切换，并处理边界情况（如第一张时点击 “上一张” 跳转到最后一张）。
核心代码示例：
javascript
运行
new Vue({
el: '#app',
data: {
imgList: ['img1.jpg', 'img2.jpg', 'img3.jpg'],
currentIndex: 0
},
methods: {
prev() {
this.currentIndex = (this.currentIndex - 1 + this.imgList.length) % this.imgList.length;
},
next() {
this.currentIndex = (this.currentIndex + 1) % this.imgList.length;
}
}
});
2. v-for 指令与图书管理案例
v-for是 Vue 用于列表渲染的指令，语法为v-for="(item, index) in 数组/对象"，是构建列表类应用的核心工具。
图书管理案例核心要点：
列表渲染：用v-for循环渲染图书列表，显示书名、作者、价格等信息。
html
预览
<ul>
<li v-for="(book, index) in books" :key="index">
{{ index + 1 }}. {{ book.name }} - {{ book.author }} - ¥{{ book.price }}
</li>
</ul>
注意：key属性是必须的，用于 Vue 高效更新 DOM（推荐使用唯一标识如 ID，而非索引）。
添加与删除功能：通过表单输入图书信息，点击 “添加” 按钮将数据 push 到books数组；点击 “删除” 按钮，根据索引或 ID 从books数组中 splice 对应元素。
数据校验：在添加图书前，检查输入是否为空，若为空则给出提示（结合v-if显示提示信息）。
3. v-model 与小黑记事本案例
v-model是 Vue 实现双向数据绑定的语法糖，主要用于表单元素（如输入框、单选框、复选框等），语法为v-model="变量"，其本质是v-bind:value和v-on:input的结合。
小黑记事本案例功能拆解：
渲染列表：用v-for渲染待办事项列表，每个事项显示内容和 “删除” 按钮。
添加功能：通过v-model绑定输入框的值，点击 “添加” 按钮将输入内容 push 到事项数组，同时清空输入框。
html
预览
<input type="text" v-model="inputValue" placeholder="请输入事项">
<button @click="addTodo">添加</button>
javascript
运行
data: {
inputValue: '',
todos: []
},
methods: {
addTodo() {
if (this.inputValue.trim() === '') return;
this.todos.push(this.inputValue);
this.inputValue = ''; // 清空输入框
}
}
删除功能：点击 “删除” 按钮，根据索引从todos数组中 splice 对应元素。
html
预览
<button @click="removeTodo(index)">删除</button>
javascript
运行
removeTodo(index) {
this.todos.splice(index, 1);
}
底部统计和清空：
统计功能：通过computed属性计算待办事项的数量（todos.length）。
清空功能：点击 “清空” 按钮，将todos数组赋值为空数组（this.todos = []）。
五、知识体系总结与学习路径建议
1. 知识体系脉络
从上述知识点可以看出，Vue 的学习遵循 “基础→语法→组件→实战” 的路径：
基础层：Vue 实例创建、响应式原理是理解 Vue 的基石。
语法层：插值表达式、指令系统（v-if、v-for、v-bind、v-on 等）是模板渲染和交互的核心工具。
组件层：（目录未完全涉及但属于进阶重点）组件的创建、通信、生命周期是大型应用的核心架构。
实战层：通过图片切换、图书管理、小黑记事本等案例，将理论知识转化为实际能力。
2. 学习路径建议
入门阶段：聚焦本文涵盖的基础知识点，通过官方文档和简单案例（如上述实战）巩固理解，重点掌握响应式原理和指令系统。
进阶阶段：深入学习组件化开发（组件的注册、props、自定义事件、插槽等）、Vue Router（路由管理）、Vuex（状态管理），构建中大型应用的能力。
实战阶段：参与开源项目或独立开发完整应用（如电商后台、管理系统），将知识体系串联起来，积累工程化经验。
3. 常见误区与避坑指南
误区一：过度依赖v-if，忽略v-show的性能优势。需根据场景选择：频繁切换用v-show，切换频率低用v-if。
误区二：滥用v-for的索引作为key。当列表有增删操作时，应使用唯一 ID 作为key，避免 DOM 更新异常。
误区三：认为v-model只能用于表单。实际上，v-model可在自定义组件中通过model选项自定义，实现组件间的双向绑定。
通过对这些核心知识点的系统学习，相信读者已对 Vue 有了全面的认识。Vue 的魅力在于其简洁性与强大功能的平衡，只要扎实掌握基础，再逐步深入进阶内容，就能在前端开发领域构建起属于自己的技术优势。后续学习中，建议结合官方文档和实际项目不断实践，在解决问题的过程中深化对 Vue 的理解。