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之前定义好，这样的话在注册组件时，代码编写就非常简洁。组件定义优化

4.组件中data为什么是一个函数【面试题】因为普通的数据定义方式是一个对象，所以对象中的数据一旦发生变化，那么在页面中使用过这个数据的地方都会发生相应的改变。而组件是可以重复使用的，所以在组件中定义data时不应该是一个对象，而应该是一个函数，在函数中返回一个新的对象，这样的话组件与组件之间就不会产生数据的影响。组件中的data应该是一个函数

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

作业： 1.实现购物车案例 2.实现后台管理系统页面布局

购物车

second组件

这是第一个组件{{ msg }}

这是第二个组件

{{msg}}

这是第三个组件

这是footer组件

这是右侧组件