VUE第二天学习

内容：计算属性、过滤器、过渡动画、组件
     生命周期、vue-cli脚手架和组件传值

一、计算属性

1.基本使用

computed，当我们的页面上需要频繁地进行数据运算时，我们需要用到计算属性。

(1)计算属性的变量名可以不在data中定义

(2)计算属性的业务逻辑函数只有在挂载点内被使用之后，才会触发

(3)计算属性关联的数据发生变化之后，计算属性的逻辑函数会重新执行，得到新的结果。

2.计算属性和methods的区别

计算属性：当关联的数据没有发生变化时，会优先使用数据缓存

而methods，只要调用了，那么就会重新执行指定的函数。

3.计算属性和监听的区别

(1)在页面加载时，计算属性的逻辑函数，在挂载点内使用了计算属性的变量时，会自动的触发，但是监听的逻辑函数不会自动执行

(2)当监听和计算属性关联的数据发生改变时，监听的优先级要比计算属性要高。

(3)计算属性：当关联的数据没有发生变化时，会优先使用数据缓存，监听没有数据缓存。

购物车案例：

    
    
    
    
    
    
    


    

        
购物车
        

            

                

                    
#
                    
商品名称
                    
商品图片
                    
价格
                    
数量
                    
小计
                    
操作
                
            
            

                

                    

                        
                    
                    
{{ item.title }}
                    

                        
                    
                    
{{ item.price }}
                    

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

                        删除
                    
                
                

                    

                        全选：
                    
                    
总价：{{ allPrice }}
                
            
        
    
    

二、过滤器

作用：对页面中展示的数据进行处理

定义：

(1)全局定义

(2)局部定义

语法格式：

new Vue({
    el
    data
    filters:{
        过滤器名称(形参){
            ...
            return 结果
        }
    }
})

使用：

通过 变量值 | (管道符) 过滤器名称

1000 | formatPrice(形参2)

参数：

管道符左边的变量永远是第一个参数，管道符右边过滤器名称(参数)，作为第二个参数。

三、过渡动画

使用场景：标签显示/隐藏、存在/消失、动态组件

1.内置类名

匿名使用

(1)进入时状态

.v-enter 设置元素进入开始状态

.v-enter-active 设置元素进入中的状态

.v-enter-to 设置元素进入后的状态

(2)离开时状态

.v-leave 设置元素离开开始状态

.v-leave-active 设置元素离开中的状态

.v-leavt-to 设置元素离开结束的状态

命名使用

当页面上有很多个元素需要去设置不同的动画过渡效果时，可以给transtion标签增一个name属性来进行区分。

2.结合animate.css

(1)下载animate.css

(2)给需要添加动画过渡效果的标签增加一个父级标签

(3)给transition设置两个属性

enter-active-class 元素进入时的动画效果

leave-active-class 元素离开时的动画效果

四、组件【重点】

1.介绍

​ 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。

组件是vue的一个实例，所以vue实例拥有的选项(除了el)组件都可以拥有【重点】

2.定义

语法格式：

new Vue({
    el:"#app",
    components:{
        组件名称:{
            template:"模板内容"
        }
    }
})

注意事项：

(1)组件名称不能是系统内置的标签名，比如：div、img

(2)template模板内容中只能有一个根标签

(3)template属性对应的值可以是一段html字符串，也可以是一个id选择器

示例：

3.组件定义优化

因为template属性的值是一个对象，所以可以把这个对象在实例化vue之前定义好，这样的话在注册组件时，代码编写就非常简洁。

    
    
    
    


    

        
        
        
        {{ msg }}
    
    
    
    
    
    

4.组件中data为什么是一个函数【面试题】

因为普通的数据定义方式是一个对象，所以对象中的数据一旦发生变化，那么在页面中使用过这个数据的地方都会发生相应的改变。

而组件是可以重复使用的，所以在组件中定义data时不应该是一个对象，而应该是一个函数，在函数中返回一个新的对象，这样的话组件与组件之间就不会产生数据的影响。

5.组件后台管理系统页面布局案例

作业：

1.实现购物车案例

2.实现后台管理系统页面布局