Vue--03--(计算属性，监听属性，动画)_vue3 监听动画

计算属性，监听属性，动画

过滤器

• 本质就是一个函数

过滤器基本定义及使用：

• 过滤器只能用在， 插值表达式和v-bind动态属性里
• vue中的过滤器场景：（需要传入一个值后传出另外一个值）

1.字符串翻转，输入helloword，输出dlrowolleh
2.字母转大写，输入hello，输出HELLO

• 语法：

1. 全局过滤器：Vue.filter("过滤器名",(值) => {return 返回处理后的值})，写在main.js文件里，可以在任意的.vue文件里直接使用
   

2. 局部过滤器：filters:{过滤器名:(值) =>{return 返回处理后的值}}，写在与data平级的export default里，只能在当前vue文件内使用
3. 使用过滤器：vue变量|过滤器名字

过滤器传参和多过滤器

• 语法：

过滤器传参：vue变量 | 过滤器(实参)
多个过滤器：vue变量 | 过滤器1 | 过滤器2

计算属性（computed）

计算属性简单写法

• 一个变量的值，依赖另外一些数据计算而来的结果
• 语法：

（计算属性和data属性都是变量，所以，不能重名）

computed:{
   "计算属性名"(){
   	return "值"
   }
}
1
2
3
4
5

• 计算属性和函数相比优势：计算属性对应的函数执行后，会把return值缓存起来。依赖项不变，多次调用都是从缓存取值；依赖项改变，函数自动重新执行，斌能够缓存新的值。

计算属性完整写法

当需要给计算属性赋值的时候，就要用到计算属性的完整写法
给full赋值触发set方法，使用full值触发get方法
语法：

——————————————————————
使用：

监听属性

基本数据类型监听

• 目标：可以监听到data/computed属性值的改变
• 语法：

watch: {"被监听的属性名" (newVal, oldVal){ } }，newVal是当前最新值，oldVal是上一刻的值

引用数据类型监听（深度监听）和立即执行（监听的完整写法）

• 目标：监听复杂类型，或者立即执行监听函数
• 语法：

immediate,deep,handler都是固定写法

动画

• 对于有动画效果的标签使用<transition></transition>进行包裹
• 在style标签里，用v-enter-active定义了进入的过渡效果，v-enter定义进入的初始状态，v-enter-to定义进入的最终状态；用v-leave-active定义了离开的过渡效果，v-leave定义离开的初始状态，v-leave-to定义离开的最终状态。

• 对于这些在过渡中切换的类名来说，如果使用一个没有名字的<transition>，则.v-是这些类名的默认前缀。
• 但如果使用了transition的name属性：<transition name="haha">，那么.v-enter要写为.haha-enter。
• transition的appear属性：appear属性为true时表示初始进入页面就有动画效果。有两种写法：

1.
<transition :appear="true">
	<h1 v-show="isShow">hello</h1>
</transition>
2.
<transition appear>
	<h1 v-show="isShow">hello</h1>
</transition>
1
2
3
4
5
6
7
8

• 那么如何在进入还是离开两个状态切换那？触发条件很多，如：元素的删除、添加或列表数据的更新。这里用v-show来修改元素状态。

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="hello">
      <h1 v-show="isShow">你好呀</h1>
    </transition>

  </div>
</template>
<script>
export default {
    name: 'TestVue',
    data() {
        return {
            isShow:true
        }
    }
}
</script>
<style scoped>
h1{
    background: lightsalmon;

    /* 谁变给谁配置transition */
    /* 定义变换时间 */
     transition: 0.5s;
}
/* 进入的起点 */
.hello-enter{
  transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to {
  transform: translateX(0);
}
/* 离开的起点 */
.hello-leave {
  transform: translateX(0);
}

/* 离开的终点 */
.hello-leave-to {
  transform: translateX(-100%);
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

• 也可以用.hello-enter-active指定变换的事件和方式

 <template>
  <div>
	    <button @click="isShow = !isShow">显示/隐藏</button>
	    
	    <transition name="hello">
	      <h1 v-show="isShow">你好呀</h1>
	    </transition>
  </div>
</template>

<script>
export default {
    name: 'TestVue',
    data() {
        return {
            isShow:true
        }
    }
}
</script>

<style scoped>
h1{
    background: lightsalmon;
}
.hello-ente,.hello-leave-to{
  transform: translateX(-100%);
}
.hello-enter-to,.hello-leave {
  transform: translateX(0);
}
/* 进入的过程 */
.hello-enter-active{
transition: 0.5s;
}
/* 离开的过程 */
.hello-leave-active {
transition: 0.5s;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

• 如果需要包裹多个元素的过渡就不能用transition标签了，要用transition-group
• 每个需要过渡的元素需要指定key值

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group name="hello">
      <h1 v-show="isShow" key="1">你好呀</h1>
      <h1 v-show="isShow" key="2">yang</h1>
    </transition-group>

  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11