计算属性,监听属性,动画
过滤器
- 本质就是一个函数
过滤器基本定义及使用:
- 过滤器只能用在,
插值表达式和v-bind动态属性
里 - vue中的过滤器场景:(需要传入一个值后传出另外一个值)
1.字符串翻转,输入helloword,输出dlrowolleh
2.字母转大写,输入hello,输出HELLO
- 语法:
- 全局过滤器:
Vue.filter("过滤器名",(值) => {return 返回处理后的值})
,写在main.js文件里,可以在任意的.vue文件里直接使用
- 局部过滤器:
filters:{过滤器名:(值) =>{return 返回处理后的值}}
,写在与data平级的export default里,只能在当前vue文件内使用- 使用过滤器:
vue变量|过滤器名字
过滤器传参和多过滤器
- 语法:
过滤器传参:
vue变量 | 过滤器(实参)
多个过滤器:vue变量 | 过滤器1 | 过滤器2
计算属性(computed)
计算属性简单写法
- 一个
变量
的值,依赖另外一些数据计算而来的结果 - 语法:
(计算属性和data属性都是变量,所以,不能重名)
computed:{
"计算属性名"(){
return "值"
}
}
- 计算属性和函数相比优势:计算属性对应的函数执行后,会把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>
- 那么如何在进入还是离开两个状态切换那?触发条件很多,如:元素的删除、添加或列表数据的更新。这里用
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>
- 也可以用
.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>
- 如果需要包裹多个元素的过渡就不能用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>