VUE第二天学习

内容：计算属性、过滤器、过渡动画、组件 生命周期、vue-cli脚手架和组件传值 一、计算属性 1.基本使用 computed，当我们的页面上需要频繁地进行数据运算时，我们需要用到计算属性。 (1)计算属性的变量名可以不在data中定义 (2)计算属性的业务逻辑函数只有在挂载点内被使用之后，才会触发 (3)计算属性关联的数据发生变化之后，计算属性的逻辑函数会重新执行，得到新的结果。 2.计算属性和methods的区别 计算属性：当关联的数据没有发生变化时，会优先使用数据缓存 而methods，只要调用了，那么就会重新执行指定的函数。 3.计算属性和监听的区别 (1)在页面加载时，计算属性的逻辑函数，在挂载点内使用了计算属性的变量时，会自动的触发，但是监听的逻辑函数不会自动执行 (2)当监听和计算属性关联的数据发生改变时，监听的优先级要比计算属性要高。 (3)计算属性：当关联的数据没有发生变化时，会优先使用数据缓存，监听没有数据缓存。 购物车案例： 二、过滤器 作用：对页面中展示的数据进行处理 定义： (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.实现后台管理系统页面布局

本文章由javascript技术分享原创和收集