Vue中的指令修饰符&计算属性和方法的区别

一、指令修饰符

1.什么是指令修饰符？

所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

2.按键修饰符

• @keyup.enter —>当点击enter键的时候才触发

  代码演示：

  
  
  
    
    
    
    
  
  
    
      
  @keyup.enter  →  监听键盘回车事件
      
    
    
    
  
  

  3.v-model修饰符

  • v-model.trim —>去除首位空格

  • v-model.number —>转数字

    4.事件修饰符

    • @事件名.stop —> 阻止冒泡

    • @事件名.prevent —>阻止默认行为

    • @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为

      
      
      
        
        
        
        
        
      
      
        
          
      v-model修饰符 .trim .number
          姓名：
      
          年纪：
      
          
          
      @事件名.stop     →  阻止冒泡
          
            儿子
          
          
      @事件名.prevent  →  阻止默认行为
          阻止默认行为
        
        
        
      
      

      二、v-bind对样式控制的增强-操作class

      为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。

      1.语法：

       :class = "对象/数组">这是一个div

      2.对象语法

      当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

      适用场景：一个类名，来回切换

      3.数组语法

      当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

      使用场景:批量添加或删除类

      三、京东秒杀-tab栏切换导航高亮

      1.需求：

      当我们点击哪个tab页签时，哪个tab页签就高亮

      2.准备代码:

       
          
      
            
      京东秒杀
            
      每日特价
            
      品类秒杀
          
        
        
        

      3.思路：

      1.基于数据，动态渲染tab（v-for）

      2.准备一个下标 记录高亮的是哪一个 tab

      3.基于下标动态切换class的类名

      4.具体实现：

      
      
      
        
        
        
        
        
      
      
        
          
      
            
      
              {{ item.name }}
            
          
        
        
        
      
      

      四、v-bind对有样式控制的增强-操作style

      1.语法

      2.进度条案例

      
      
      
        
        
        
        
        
      
      
        
          
          
            
            
              {{ percent }}%
            
          
          设置25%
          设置50%
          设置75%
          设置100%
        
        
        
      
      

      五、v-model在其他表单元素的使用

      1.讲解内容：

      常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

      它会根据 控件类型 自动选取 正确的方法 来更新元素

      输入框  input:text   ——> value
      文本域  textarea	 ——> value
      复选框  input:checkbox  ——> checked
      单选框  input:radio   ——> checked
      下拉菜单 select    ——> value
      ...

      2.案例： 

      
      
      
        
        
        
        
        
      
      
        
          
      小黑学习网
          姓名：
             
            
      
      
          是否单身：
             
            
      
      
          
          性别: 
            男
            女
            
      
      
          
          所在城市:
            
              北京
              上海
              成都
              南京
            
            
      
      
          自我描述：
             
          立即注册
        
        
        
      
      

      六、computed计算属性

      1.概念

      基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。

      2.语法

      1. 声明在 computed 配置项中，一个计算属性对应一个函数

      2. 使用起来和普通属性一样使用 {{ 计算属性名}}

      3.注意

      1. computed配置项和data配置项是同级的

      2. computed中的计算属性虽然是函数的写法，但他依然是个属性

      3. computed中的计算属性不能和data中的属性同名

      4. 使用computed中的计算属性和使用data中的属性是一样的用法

      5. computed中计算属性内部的this依然指向的是Vue实例

      4.案例

      比如我们可以使用计算属性实现下面这个业务场景

      

      
      
      
        
        
        
        
        
      
      
        
          
      小黑的礼物清单
          
      
            
      
              
      名字
              
      数量
            
            
      
              
      {{ item.name }}
              
      {{ item.num }}个
            
          
          
          
      礼物总数：{{ totalCount }} 个
        
        
        
      
      

      七、computed计算属性 VS methods方法

      1.computed计算属性

      作用：封装了一段对于数据的处理，求得一个结果

      语法：

      1. 写在computed配置项中

      2. 作为属性，直接使用

         • js中使用计算属性： this.计算属性

         • 模板中使用计算属性：{{计算属性}}

      2.methods计算属性

      作用：给Vue实例提供一个方法，调用以处理业务逻辑。

      语法：

      1. 写在methods配置项中

      2. 作为方法调用

         • js中调用：this.方法名()

         • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

      3.计算属性的优势

      1. 缓存特性（提升性能）

         计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

         依赖项变化了，会自动重新计算 → 并再次缓存

      2. methods没有缓存特性

      3. 通过代码比较

      
      
      
        
        
        
        
        
      
      
        
          
      小黑的礼物清单🛒{{ totalCountFn() }}
          
      小黑的礼物清单🛒{{ totalCountFn() }}
          
      小黑的礼物清单🛒{{ totalCountFn() }}
          
      小黑的礼物清单🛒{{ totalCountFn() }}
          
      
            
      
              
      名字
              
      数量
            
            
      
              
      {{ item.name }}
              
      {{ item.num }}个
            
          
          
      礼物总数：{{ totalCountFn() }} 个
        
        
        
      
      

      4.总结

      1.computed有缓存特性，methods没有缓存

      2.当一个结果依赖其他多个值时，推荐使用计算属性

      3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

      八、计算属性的完整写法

      既然计算属性也是属性，能访问，应该也能修改了？

      1. 计算属性默认的简写，只能读取访问，不能 "修改"

      2. 如果要 "修改" → 需要写计算属性的完整写法

      

      完整写法代码演示

      
      
      
        
        
        
        
        
      
      
        
          姓： +
          名： =
          {{ fullName }}
      
      
          
          改名卡
        
        
        
      
      

      九、综合案例-成绩案例

      

      功能描述：

      1.渲染功能

      2.删除功能

      3.添加功能

      4.统计总分，求平均分

      思路分析：

      1.渲染功能 v-for :key v-bind:动态绑定class的样式

      2.删除功能 v-on绑定事件， 阻止a标签的默认行为

      3.v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据

      4.使用计算属性computed 计算总分和平均分的值

      
      
        
          
          
          
          
                  
                    {{ index + 1 }}
                    {{ item.subject }}
                    
                    {{ item.score }}
                    删除
                  
                
                
                  
                    
                      暂无数据
                    
                  
                
                
                  
                    
                      总分：{{ totalScore }}
                      平均分：{{ averageScore }}
                    
                  
                
              
            
            
              
                科目：
                
                  
                
              
              
                分数：
                
                  
                
              
              
                
                
                  添加