vue核心技术（二）

◆ 指令补充

指令修饰符

通过 "." 指明一些指令 后缀，不同 后缀 封装了不同的处理操作 → 简化代码

v-bind 对于样式控制的增强 

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

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

语法 :class = "对象/数组"

v-bind 对于样式控制的增强 - 操作style 

语法 :style = "样式对象"

v-model 应用于其他表单元素 

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

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

简单来说就是使用v-model来给表单元素设置默认的初始值

 

 

  
  
  
  
  



  

    
小黑学习网

    姓名：
       
      



    是否单身：
       
      



    
    性别: 
      男
      女
      



    
    所在城市:
      
        北京
        上海
        成都
        南京
      
      



    自我描述：
       

    立即注册
  
  
  

 

◆ computed 计算属性

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

语法：

① 声明在 computed 配置项中，一个计算属性对应一个函数
② 使用起来和普通属性一样使用 {{ 计算属性名 }}
计算属性 → 可以将一段 求值的代码 进行封装

computed 计算属性 vs methods 方法 

 

计算属性完整写法 （重点）

成绩案例 

  
    
    
    
    
    
  
  
    

      

        

          

            

              
编号
              
科目
              
成绩
              
操作
            
          
          

            

              
{{index+1}}
              
{{item.subject}}
              
{{item.score}}
              
删除
            
           
          
          

            

              

                暂无数据
              
            
          

          

            

              

                总分：{{total}}
                平均分：{{avg}}
              
            
          
        
      
      

        

          
科目：
          

            
          
        
        

          
分数：
          

            
          
        
        

          

          

            添加
          
        
      
    
    

    
  

 

 

◆ watch 侦听器（重点）

作用：监视数据变化，执行一些 业务逻辑 或 异步操作。

语法：

① 简单写法 → 简单类型数据，直接监视

② 完整写法 → 添加额外配置项

简单写法

完整写法 

小结：

watch侦听器的语法有几种？

① 简单写法 → 监视简单类型的变化

 

② 完整写法 → 添加额外的配置项 (深度监视复杂类型，立刻执行)

 

◆ 综合案例：水果购物车

  
    
    
    
    
    
    
  
  
    

      
      

      
      

        
        /
        购物车
      
      
      

        

          
          

            

              
选中
              
图片
              
单价
              
个数
              
小计
              
操作
            
          
          
          

            

              

              

              
{{item.price}}
              

                

                   - 
                  {{item.num}}
                   + 
                
              
              
{{(item.price*item.num).toFixed()}}
              
 删除
            

          
          
        
        
        

          
          
            
            全选
          
          

            
            总价  :  ¥ {{totalMoney}}
            
            结算( {{totalNum}} )
          
        
      
      
      
空空如也
    
    
    
  

 

小结：

业务技术点总结：
1. 渲染功能： v-if/v-else v-for :class
2. 删除功能: 点击传参 filter过滤覆盖原数组
3. 修改个数：点击传参 find找对象
4. 全选反选：计算属性computed 完整写法 get/set
5. 统计选中的总价和总数量: 计算属性computed reduce条件求和
6. 持久化到本地： watch监视，localStorage，JSON.stringify, JSON.parse