文章目录
一、计算属性（一）计算属性--computed（1）目标（2）语法（3）特点（4）注意
（二）计算属性--缓存（1）目标（2）使用场景（3）优势
（三）计算属性--完整写法（1）目标（2）语法（4）使用场景
二、监听属性（一）监听属性--watch（1）目标（2）语法（3）如何侦听到某个变量改变呢？
（二）监听属性--深度监听（1）目标（2）语法（3）如何监听一个对象/数组呢
三、动画（一）动画（1）transition（2）动画代码
（二）过渡（1）transition-group（2）过渡代码
（三）网页（1）步骤（2）网页代码
一、计算属性
（一）计算属性–computed
（1）目标
一个变量的值，依赖另外一些数据计算而来的结果
（2）语法
computed:{
"计算属性名"(){
return "值"
}
}
（3）特点
函数内使用的变量改变，重新计算结果返回
（4）注意
场景：一个变量的值，需要用另外变量计算而得来 注意：计算属性和data属性都是变量—不能重名
（二）计算属性–缓存
（1）目标
计算属性，基于依赖项的值进行缓存，依赖的变量不变，都直接从缓存取结果
（2）使用场景
当变量值依赖其他变量计算而得来才用
（3）优势
带缓存，只要依赖项不变，都直接从缓存中取 依赖项改变，函数自动执行并重新缓存
计算属性的优势： 带缓存 计算属性对应函数执行后，会把return值缓存起来 依赖项不变，多次调用都是从缓存取值 依赖项值变化，函数会“自动”重新执行并缓存新的值
（三）计算属性–完整写法
（1）目标
计算属性也是变量
（2）语法
computed:{
"属性名":{
set(值){
},
get(){
return "值"
}
}
}
（4）使用场景
给计算属性变量赋值时，需要用计算属性的完整方法 set接收要赋予的值，get里要返回给这个计算属性具体值
二、监听属性
（一）监听属性–watch
（1）目标
可以侦听data/computed属性值的改变
（2）语法
watch:{
"被侦听的属性名"(newVal,oldVal){
}
}
（3）如何侦听到某个变量改变呢？
使用watch配置项，key是要侦听的data/计算属性名
（二）监听属性–深度监听
（1）目标
侦听复杂类型，或者立即执行侦听函数
（2）语法
watch:{
"要侦听的属性名":{
immediate:true,//立即执行
deep:true,//深度侦听复杂类型内变化
handler(newVal,oldVal){
}
}
}
（3）如何监听一个对象/数组呢
把侦听器写成对象形式，给handler方法和deep:true
三、动画
（一）动画
（1）transition
name
一开始就动画显示 :appear="true"相当于appear appear="true"相当于是字符串
（2）动画代码
App.vue 动画.vue
（二）过渡
（1）transition-group
当transition里面的标签为多个是变为transition-group 并在里面的标签上添加key值
（2）过渡代码
App.vue 过渡.vue(简写）
（三）网页
（1）步骤
1.打开终端 运行 npm install animate.css 2.引入 import ‘animate.css’ 3.配置库 name=“animate__animated animate__bounce” 4.进入动画 enter-active-class=“animate__swing” 5.离开动画 leave-active-class=“animate__bounceOutUp”
（2）网页代码
App.vue 网页.vue
文章链接
发表评论