Vue基础day03计算属性_ref_生命周期2_iscroll_动画

一.核心内容

*任务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，它会重新计算滚动范围（将新增项包含进去）

增加li


    

        
...
        
...
        ...
    

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 钩子

    
{{msg}}
    添加
    修改data.msg
    

        

            
{{item}}-----{{index}}
        
    

* 在线案例 优化 英雄列表

8.过渡与动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

8.1 单个元素过渡

• Vue提供了 transition 标签 封装需要过渡效果的元素
  • 其中 name 属性 要和 过渡选择器前缀 一致
• 使用条件：条件渲染 ( v-if / v-show )
• 体验：

    
    

    
    
        
        讨厌了~死鬼~~~
    

8.2 过渡类选择器

过渡动画 分两个阶段： 动画 进入 到完成 ， 和 ， 动画 离开 到 结束。

• 过渡样式类名：分 进入 和 离开 两类

image.png

• 进入过渡

  1. v-enter：定义进入过渡的开始状态。在元素显示之前生效，在元素显示完成后移除
  2. v-enter-active：过渡动画执行阶段样式，在元素显示之前生效，在过渡/动画完成后移除
  3. v-enter-to: 2.1.8版及以上 定义动画的结束状态（就是最终要显示成什么样子）。在元素显示之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除

• 退出过渡

  1. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
  2. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。
  3. 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，不要修改原数组

    
    

      

        
手机品牌管理
        
      
    

    

      
品牌列表
      新增品牌
    

    
    

      

        
编号
        
品牌名称
        
品牌描述
        
操作
      
      

        
{{ index + 1 }}
        
{{ item.name }}
        
{{ item.remark }}
        

          删除
        
      
      

        
没有品牌数据
      
    

    
    

      

        
新增品牌
        

          品牌名称:
          
        
        

          品牌描述: