【Vue】vue基础语法——computed计算、watch监听、class和style，最后回顾JavaScript里面的常用方法（vue学习day03）

大家好，从今天开始，会每天分享vue学习的知识点，一起加油~

首先，学习几个单词

computed 计算，watch 监听，handler处理器，deep深度，config配置，global全局，Properties 属性，filters过滤，directive指令

1、computed计算

• 计算属性是基于它们的响应式依赖进行缓存的
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
• 模板中放入太多的逻辑会让模板过重且难以维护  使用计算属性可以让模板更加的简洁
• 从现有数据计算出新的数据（只读）

课堂案例：01搜索水果

    

        
搜索水果
        
        
{{item}}
    
    
    
    

运行结果

课堂案例： 02计算总价

    
    
    
    
    
    



    

        

            

                

                
商品名称
                
价格
                
数量
            
            

                
 
                
{{item.name}}
                
{{item.price}}
                
 {{item.num}} 
            
        
        
总价:{{total}}元 , 共{{totalPrice}}件
    

    

运行结果

 

2、watch监听

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

注意：引用数据类型需要添加处理器handler与deep。

监听数据的变化执行回调函数

watch:{
"obj":{
handler(nval){
//执行回调函数
}，
deep:true
}
}

课堂案例：01监听值类型 

    
    
    
    
    
    



    

        
watch监听
        {{num}}
    

    

运行结果 

 课堂案例：02监听引用类型

    
    
    
    
    
    



    

        
watch监听
        {{obj.num}}
    

    

 运行结果

课堂案例：03简易计算器运算

    

        
watch监听
        
        
            +
            -
            ×
            ÷
        
        
        =
        {{obj.result}}
    
    
    
    

代码运行结果

3、class

用v-bind给标签class设置动态的值  

语法

:class="{类名：布尔值;}"  true 使用 false 不使用

Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

文本

:class="active"  

注意：没有加单引号的active是一个变量不是字符串

对象

:class="{'active':flag}" 

 数组

:class="list"

课堂案例

    
    
    
    
    
    



    

        开
        关
        
文本
    
    

 运行结果

4、style

:style="{color:'red',fontSize:'24px'}"

css属性 驼峰式写法

 课堂案例

    

        
        
        
样式的绑定
    

    
    

运行结果

 

5、回顾JavaScript

5.1数组

Array对象方法

indexOf(要查找的元素，开始查找的位置)	返回值 首个被找到的元素在数组中的索引位置;若没有找到则返回-1
shift	删除
pop	后删
splice	中间删
unshift	前加
push	后加
reverse	翻转
join()	转字符串
contact（）	连接数组
filter	过滤
forEach	遍历
map	映射
reduce	累计
some	有一个
every	每一个
find	查找符合条件的元素
findIndex	查找符合条件的元素下标
sort	排序

5.2字符串

String对象方法

indexOf、lastindexOf	查询字符串下标，找不到返回-1
split('')	分割为数组
slice(start,end)	切割字符串
subString(start,end)	截取字符串（按下标end）
subStr(start,len)	截取字符串（按长度len）

5.3json

eval()	字符串当js执行
JSON.parse(str)	json字符串转换为js对象
JSON.stringify(obj)	把js对象转换为json字符串

5.4本地存储localStorage

getItem(key)	获取值
setItem(key,value)	存储值
removeItem(key)	删除存储
clear	清空