一.核心内容
*任务1 计算成绩
如图，根据 三门学科输入的成绩，自动显示 总分 和 平均分
计算成绩
- 代码实现
学科 成绩
数学
英语
化学
总分
{{Math + English + Chemistry}}
平均分
{{(Math + English + Chemistry)/3}}
- 问题：一旦修改，会出现 字符串 拼接 效果
image.png
1.v-model修饰符
- 语法：(两个常用修饰符)
- v-model.number - 输入字符串转成数字
- v-model.trim - 去掉输入字符串的首位空格
- 代码
学科 成绩
数学
英语
化学
总分
{{Math + English + Chemistry}}
平均分
{{(Math + English + Chemistry)/3}}
- 效果
image.png
2.计算属性computed
任务1 中 在标签里 直接写了 总分和平均分的 运算逻辑。逻辑比较简单，但如果遇到逻辑比较复杂的，就不方便维护了。
我们最好把逻辑 写在标签外面，比如：method 中
2.1 使用method方法
- 在 method 中 声明 sum() 和 avg()方法，根据 data中的 三个分数 进行计算
学科
成绩
数学
英语
化学
总分
{{sum()}}
平均分
{{avg()}}
-
问题：功能虽然能实现，但 其实有隐藏的性能问题，在视图中每次 调用
sum()方法，都会执行方法代码其实：只要 三个学科成绩 没有发生变化，那么 总成绩 与 平均成绩 都是 不需要重新计算 的！
2.2 使用computed属性
除了把逻辑写在 methods 中之外，我们还可以 将逻辑写在 computed 属性中
- 概念：计算属性，类似于 methods，在运行时基于 data 数据 计算返回结果的属性。
- 语法：
- 1.在 Vue实例对象的 computed 中 声明 "方法"
- 2.在其它地方 当做 "属性" 调用
总分:{{sum}}
- 在 computed 中 声明 sum() 和 avg()方法，根据 data中的 三个分数 进行计算
学科
成绩
数学
英语
化学
总分
{{sum}}
平均分
{{avg}}
平均分
{{avg}}
- 特点：
- 调用时不加小括号
- data 中 被 computed 用到的数据 只要发生改变，就会 重新执行 computed 中对应的 计算属性
- 缓存数据：computed 属性 会缓存运行结果，从而减少运算量 ( methods中的方法没有这个特点 )
- 比如 我们在页面上多次 执行
{{sum}}，但 都不会 触发 sum属性函数，因为 data 没被修改
- 比如 我们在页面上多次 执行
image.png
3.Vue获取dom(ref 指令)
在 Vue 中 可以 访问到 dom对象吗？--可以
- ref 是一个特殊的标签属性，一旦为标签添加了
ref='id名称'，就可以在vue中访问了 - 语法：
- 在标签中 添加
ref='id名称'指令 - 在vue方法中 访问
app.$refs.id名称，返回 dom对象
- 在标签中 添加
月黑风高夜
4.生命周期2
昨天我们学习了 beforeCreated 和 created 钩子，今天再来学几个
- 昨天
- beforeCreate (一次性执行)
- created (一次性执行)
- 今天
- beforeMount - 渲染dom之前，无法通过 ref指定 获取dom，胡子语法也都没替换 (一次性执行)
- mounted - 渲染dom之后，可以通过 ref指定 获取dom，胡子语法替换完成 (一次性执行)
- beforeUpdate - 一旦 data 数据发生修改，在 更新渲染 dom 之前 (多次执行)
- updated - 更新渲染 dom 之后 (多次执行)
{{test}}
- 执行结果
image.png
5.iScroll基本用法
容器标签(如：div) 自带的 overflow 滚动条 有点审美疲劳，且不支持 内容滑动 等效果
介绍：iScrol l是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件(4kb)
-
特点：
- 可以在PC，移动设备和智能电视平台上工作
- iScroll 可以处理任何需要与用户进行移动交互的元素：滚动，缩放，平移，无限滚动，视差滚动，旋转功能
-
官方：
iScroll 访问不了 (iscrolljs.com)
iScroll github (https://github.com/cubiq/iscroll) ->
build 文件夹包含各个版本
image.png
中文文档 (http://caibaojian.com/iscroll-5/versions.html)
-
使用方法：
- 必须使用 三层结构 （滚动列表容器 -> 数据容器 -> 数据项 ），比如：
- div -> ul -> li
- div -> div ->div
- 至少设置 滚动列表容器 样式表 两个样式
- overflow:hidden; - 隐藏默认滚动条
- position:relative; - 必须为 滚动条 父容器设置定位
- 导入
iscroll.js文件 - 初始化 IScroll对象
- 传入 滚动列表容器 的 选择器名称 or dom对象
- 传入 参数对象
- mouseWheel: true - 鼠标滚轮控制
- scrollbars: true - 滚动条的显示
- 必须使用 三层结构 （滚动列表容器 -> 数据容器 -> 数据项 ），比如：
- ...
- ...
...
6.iScroll刷新
- 当列表中数据项 新增时，需要刷新一下 iScroll，它会重新计算滚动范围（将新增项包含进去）
- ...
- ...
...
7.在Vue中使用 iScroll
7.1 基本使用
- 用 v-for 循环生成数据项 （滚动列表容器 -> 数据容器 -> 数据项 ），比如：
- div -> ul -> li(数据项)
- 至少设置 滚动列表容器 样式表 两个样式
- overflow:hidden; - 隐藏默认滚动条
- position:relative; - 必须为 滚动条 父容器设置定位
- 导入
iscroll.js文件 - mounted 钩子函数中，初始化 IScroll对象
- 传入 滚动列表容器 的 选择器名称 or dom对象
- 传入 参数对象
- mouseWheel: true - 鼠标滚轮控制
- scrollbars: true - 滚动条的显示
{{msg}}
- {{item}} -> index}}
7.2 新增元素 与 $nextTick
- 为列表新增元素后，要 刷新iScroll，而在 vue 中怎么刷新呢？
- 先在 data 中保存 iScroll 对象
- 新增数据后，vue 会渲染dom，渲染结束后再刷新
- 新增按钮点击事件函数中刷新 - 注意：需要等vue渲染dom结束
-
setTimeout(()=>{ this.myScroll.refresh() },1);- 1毫秒后 调用 -
this.$nextTick(()=>{ this.myScroll.refresh() })- vue特有,渲染结束后自动调用
-
- updated 钩子函数中刷新 - 不推荐，因为 修改data 中 任意 数据 都会 触发 updated 钩子
- 新增按钮点击事件函数中刷新 - 注意：需要等vue渲染dom结束
{{msg}}
- {{item}}-----{{index}}
* 在线案例 优化 英雄列表
8.过渡与动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
8.1 单个元素过渡
- Vue提供了
transition 标签封装需要过渡效果的元素- 其中 name 属性 要和 过渡选择器前缀 一致
- 使用条件：条件渲染 (
v-if / v-show) - 体验：
讨厌了~死鬼~~~
8.2 过渡类选择器
过渡动画 分两个阶段： 动画 进入 到完成 ， 和 ， 动画 离开 到 结束。
- 过渡样式类名：分 进入 和 离开 两类
image.png
-
进入过渡
-
v-enter：定义进入过渡的开始状态。在元素显示之前生效，在元素显示完成后移除 -
v-enter-active：过渡动画执行阶段样式，在元素显示之前生效，在过渡/动画完成后移除 -
v-enter-to: 2.1.8版及以上 定义动画的结束状态（就是最终要显示成什么样子）。在元素显示之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除
-
-
退出过渡
-
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 -
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。 -
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave被删除)，在过渡/动画完成之后移除。
-
8.3 过渡+动画
如果 想要更丰富的 过渡效果，可以 使用 keyframes 相关动画库
- 动画库 的 基本使用，当然也可以去 配合使用第三方 CSS 动画库，如 【Animate.css】 的 【文件下载】
讨厌了~~
8.4 多元素过渡
- Vue提供了
transition-group 标签封装多个需要过渡效果的元素- 属性：
- name 属性 要和 过渡效果类选择器前缀 一致
- tag 属性 ，指定
transition-group最终 被转成 的 标签名
- 标签内部的内容项标签，必须 指定 :key特性
- 使用条件：条件渲染 (
v-if / v-show) - 体验：
- 属性：
讨厌了~~1
讨厌了~2~
讨厌了3~~
8.5 过渡延迟显示
- 我们想实现 元素 按顺序 逐个显示 咋办？- 【过渡延迟】
- 语法：
:style=":style="{transitionDelay:'1000ms'}""
讨厌了~~1
讨厌了~2~
讨厌了3~~
8.6 列表过渡效果
- vue 中 当 列表 依赖 数据生成时，那么 说句的 删减 都会 直接 触发 列表项的 改变，而触发过渡效果
{{ item }}
二.核心案例
1.购物车
image.png
- 思路：
- 数据结构 分析
- 列表生成
- 按钮事件
- 总价计算
-
{{item.name}}：
单价：{{item.price}}元
- 总价：{{getTotalMoney}}元
2.品牌列表管理
image.png
- 思路：
- 数据结构 分析
- 表格数据行 生成
- 新增
- 显示/隐藏 新增面板 -
v-show - 确认按钮：向数组中 push { 品牌名称 和 品牌描述 }
- 显示/隐藏 新增面板 -
- 删除
- 根据id找出 要删除 数据对象在数组中的 下标
- 调用splice方法 删除 对应 下标元素 - vue会自动更新视图
- 搜索
- 每次搜索 都 根据 条件 从数组中筛选出 一个新数组 给 表格 显示 - 计算属性
- 重点：表格数据源 绑定到 计算属性 newList，不要修改原数组