Vue2.x核心技术与实战(一)
目录
一、Vue2.x
1.1 Vue快速上手
1.1.1 Vue概念
1.1.2 创建实例
1.1.4 响应式特性
1.1.5 开发者工具
1.2 Vue指令
1.2.1 v-html
1.2.3 v-show / v-if
v-show
v-if
1.2.4 v-else / v-else-if
1.2.5 v-on
v-on 调用传参
1.2.6 v-bind
图片切换案例 - 波仔学习之旅
1.2.7 v-for
图书管理案例-小黑的书架
v-for 中的 key
v-for 中的 key - 不加 key
v-for 中的 key
1.2.8 v-model
1.3 综合案例-小黑记事本
1.4 指令补充
1.4.1 指令修饰符
1.4.2 v-bind 对于样式操作的增强
v-bind 对于样式控制的增强 - 操作class
案例：京东秒杀tab导航高亮
v-bind 对于样式控制的增强 - 操作style
1.4.3 v-model 应用于其他表单元素
1.5 computed计算属性
1.5.1 基础语法
1.5.2 computed 计算属性 VS methods 方法
1.5.3 完整写法
1.5.4 成绩案例
1.6 watch侦听器
1.6.1 基础语法
1.6.2 完整写法
1.7 综合案例 - 水果购物车
一、Vue2.x
1.1 Vue快速上手
1.1.1 Vue概念
Vue 是什么？
概念：Vue是一个用于 ①构建用户界面的 ②渐进式 ③框架
解释如下：
①构建用户界面的 ：基于数据渲染出用户看到的页面
②渐进式：循序渐进
Vue的两种使用方式：
①Vue核心包开发
- 场景：局部模块改造
②Vue核心包 & Vue插件工程化开发
- 场景：整站开发
③框架：一套完整的项目解决方案
优点：大大提升开发效率(70%↑)
缺点：需要理解记忆规则→官网
Vue2官网：https://v2.cn.vuejs.org/
Vue3官网：https://cn.vuejs.org/
总结：
Vue是什么?
Vue是一个用于 构建用户界面 的 渐进式 框架
- 构建用户界面：基于数据动态渲染页面
- 渐进式：循序渐进的学习
- 框架：一套完整的项目解决方案，提升开发效率↑ (理解记忆规则) 规则→官网
1.1.2 创建实例
创建Vue实例，初始化渲染
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title>
</head><body><!-- 创建Vue实例，初始化渲染1.准备容器(Vue所管理的范围)2.引包 (开发版本包 /生产版本包) 官网3.创建实例4.添加配置项=>完成渲染 --><div id="app"><h1>{{ msg }}</h1><a href="#">{{ count }}</a></div><!-- 引入的是开发版本包-包含完整的注释和警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 一旦引入VueJS核心包，在全局环境，就有了 Vue 构造函数const app = new Vue({// 通过 el 配置选择器，指定 Vue 管理的是哪个盒子el: "#app",// 通过 data 提供数据data: {msg: "Hello",count: 666,},});</script>
</body></html>
总结：
创建Vue实例，初始化渲染的核心步骤：
- 准备容器
- 引包(官网) - 开发版本 / 生产版本
- 创建Vue实例 new Vue()
- 指定配置项 el data =>渲染数据
① el 指定挂载点，选择器指定控制的是哪个盒子
② data提供数据
1.1.3 插值表达式 { { }}
插值表达式是一种 Vue 的模板语法
1. 作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
2. 语法：{ { 表达式 }}
3. 注意点：
(1) 使用的数据必须存在(data)
(2) 支持的是表达式，而非语句，比如：if、for ...
(3) 不能在标签属性中使用 { { }} 插值
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title>
</head><body><!-- 插值表达式: Vue的一种模板语法作用:利用 表达式 进行插值渲染语法: {{ 表达式 }} 注意点：1.使用的数据要存在2.支持的表达式，不是语句 if for 3.不能在标签属性中使用 {{ }}--><div id="app"><p>{{nickname}}</p><p>{{nickname.toUpperCase()}}</p><p>{{nickname + "你好"}}</p><p>{{age>=18 ? "成年":"未成年"}}</p><p>{{friend.name}}</p><p>{{friend.desc}}</p></div><!-- 引入的是开发版本包-包含完整的注释和警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {nickname: "tony",age: 18,friend: {name: "小明",desc: "喜欢唱歌",},},});</script>
</body></html>
总结：
1. 插值表达式的作用是什么?
- 利用表达式进行插值，将数据渲染页面中
2. 语法格式?
- { { 表达式 }}
3. 插值表达式的注意点：
①使用的数据要存在(data)
②支持的是表达式，而非语句 if ... for
③不能在标签属性里面使用
1.1.4 响应式特性
Vue核心特性：响应式
我们已经掌握了基础的模板渲染，其实除了基本的模板渲染，Vue背后还做了大量工作。
比如：数据的响应式处理 → 响应式：数据变化，视图自动更新
数据改变，视图会自动更新
聚焦于数据 → 数据驱动视图
使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可
总结：
1. 什么是响应式呢?
- 数据改变，视图自动更新
- 使用Vue开发→专注于业务核心逻辑即可
2. 如何访问或修改数据呢?
- data中的数据，最终会被添加到实例上
- ①访问数据："实例.属性名"
- ②修改数据："实例.属性名"= "值"
1.1.5 开发者工具
安装Vue开发者工具：装插件调试Vue应用
(1)通过谷歌应用商店安装(国外网站)
(2)极简插件：下载→开发者模式→拖拽安装→插件详情允许访问文件
https://chrome.zzzmh.cn/index
打开 Vue 运行的页面，调试工具中 Vue栏，即可查看修改数据，进行调试。
1.2 Vue指令
Vue 会根据不同的【指令】，针对标签实现不同的【功能】
指令：带有 v-前缀 的 特殊 标签属性
1.2.1 v-html
作用：设置元素的 innerHTML
语法：v-html= "表达式"
总结：
1. 什么是Vue指令呢?
- 指令就是带有 v-前缀 的特殊 属性，不同属性 对应 不同的功能
- 学习不同指令 → 解决不同业务场景需求
2.如果需要动态解析标签,可以用哪个指令?语法?
v-html="表达式"→动态设置元素 innerHTML
1.2.3 v-show / v-if
v-show
作用：控制元素显示隐藏
语法：v-show= "表达式" 表达式值 true显示，false隐藏
原理：切换 display:none 控制显示隐藏
场景：频繁切换显示隐藏的场景
v-if
作用：控制元素显示隐藏(条件渲染)
语法：v-if="表达式" 表达式值true显示，false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示， 要么隐藏，不频繁切换的场景
总结：
- v-show 底层原理：切换 CSS 的 display:none 来控制显示隐藏
- v-if 底层原理：根据判断条件控制元素的 创建 和 移除
1.2.4 v-else / v-else-if
作用：辅助 v-if 进行判断渲染
语法：v-else v-else-if = "表达式"
注意：需要紧挨着 v-if 一起使用
1.2.5 v-on
作用：注册事件 = 添加监听 + 提供处理逻辑
语法：① v-on：事件名= "内联语句" ② v-on：事件名= "methods中的函数名"
简写：@事件名
注意：methods函数内的 this指向Vue实例
v-on 调用传参
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style>
</head><body><div id="app"><div class="box"><h3>小黑自动售货机</h3><but