watch&computed&animate

最新推荐文章于 2023-03-05 10:28:08 发布

小白Hard

最新推荐文章于 2023-03-05 10:28:08 发布

阅读量108

点赞数

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/lly193426/article/details/109174220

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

watch中使用到的属性必须在data中声明，可以有异步操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{fullName}}
    </div>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            firstName:'Foo',
            lastName:'Bar',
            fullName:'Foo Bar'
        },
        // watch:{//监视属性，当属性发生改变时触发，必须在data中已经声明 
        // //如下是函数的方式
        //     firstName(newVal){
        //         this.fullName=newVal+this.lastName;
        //     },
        //     lastName(newVal){
        //         this.fullName=this.firstName+newVal;
        //     }
        // },
        //如下使用对象的方式
        watch:{
            firstName:{
                handler(newVal,oldVal){ //只有当监视的属性值发生改变时handler函数才会执行
                    this.fullName=newVal+this.lastName;
                },
                immediate:true, //立即执行handler函数
                deep:true //深层监控 当firstName的值也是一个对象时
            }
        }
    })
</script>

computed不可以进行异步操作，不能在data中进行声明。

    let vm=new Vue({
        el:"#app",
        data:{
            firstName:'Foo',
            lastName:'Bar',
            // fullName:'Foo Bar'
        },
        computed:{//计算属性 不能再data中声明过 每一个计算属性都有get,set方法
        //依赖属性发生改变，则计算属性才发生改变，若没有改变则直接从缓存中读取之前的值，不会重新渲染，大大提高性能
            // fullName(){ //相当于get方法获取值 
            //     return this.firstName+this.lastName;
            // }
            fullName:{
                get(){ //先会自动的调用get方法，后期依赖值发生改变调用
                    return this.firstName+this.lastName;
                },
                set(val){ //对计算属性设置值时调用，并且把设置值自动保存在val中，可以进行其他的操作
                    console.log(val);
                }
            }
        }
    })

animate过渡类名设置
6个状态.v-enter、.v-enter-active、.v-enter-to、.v-leave、.v-leave-active、.v-leave-to，其中v可以用name的名字代替。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .fade-enter{
            background-color: aquamarine;
        }
        .fade-enter-active{
            background-color: burlywood;
            transition: all 2s linear;
        }
        .fade-enter-to{
            background-color: coral;
        }
        /* 进入状态结束会变成默认的背景色 */
        .fade-leave{
            background-color: darkgreen;
        }
        .fade-leave-active{
            background-color: darkred;
            transition: all 2s linear;
        }
        .fade-leave-to{
            background-color: deeppink;
        }
        /* 离开状态会消失 */
    </style>
</head>
<body>
    <div id="app">
        <button @click="change">按钮</button>
        <transition name="fade">
            <div class="box" v-if="isShow"></div>
        </transition>
    </div>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods:{
            change(){
                this.isShow=!this.isShow;
            }
        }
    })
</script>