VUE框架深度监视与打开页面立即实现监视效果------VUE框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>数字:<input type="text" v-model:value="value"/></h1>
        <h1>监视B:<input type="text" v-model:value="a.b"/></h1>
        <h1>监视C:<input type="text" v-model:value="a.c"/></h1>
        <h1>监视F:<input type="text" v-model:value="a.d.e.f"/></h1>
    </div>
    <script>
        const vm = new Vue({
            data : {
                msg : "Hello",
                value : "",
                a : {
                    b : 0,
                    c : 0,
                    d : {
                        e : {
                            f : 0
                        }
                    }
                }
            },
            computed : {
                hehe()
                {
                    return "hehe" + this.value;
                }
            },
            watch : {
                //可以监视多个属性的
                // 监视什么属性,就把什么属性放在这即可
                value : {
                    immediate : true,
                    // 这里有一个固定写死的方法就叫handler
                    // handler什么时候被调用
                    handler(newValue,oldValue)
                    {
                        // 如果是箭头函数,这个对象是window对象
                        // 依旧不建议箭头函数
                        // 默认是vm对象(vue实例对象)
                        console.log(this);
                        // 这个方法在被监视参数变化时自动调用
                        // handler有两个参数,第一个是newValue,另外一个是oldValue
                        // newValue是属性改变后的新数值,oldValue是改变前的老数值
                        console.log("自带的老的" + oldValue);
                        console.log("自带的新的" + newValue);
                    }
                },
                // 无法监视b属性,因为b属性在data下压根不存在
                // 如果监视的属性具有多级属性,一定要记得添加单引号
                "a.b" : {
                    // 因此我们修改b,a的内存指向压根没变
                    // 只是b的值变化了,所以对于a来说,他没有产生变化
                    // 不会触发变更的handler方法
                    handler(newValue,oldValue)
                    {
                        console.log(this);
                        console.log("自带的老的" + oldValue);
                        console.log("自带的新的" + newValue);
                    }
                },
                "a.c" : {
                    handler(newValue,oldValue)
                    {
                        console.log(this);
                        console.log("自带的老的" + oldValue);
                        console.log("自带的新的" + newValue);
                    }
                },
                "a" : {
                    // 启用深度监视,可以将这个多层级结构的所有属性一并监视
                    deep : true,
                    handler(newValue,oldValue)
                    {
                        console.log(this);
                        console.log("自带的老的" + oldValue);
                        console.log("自带的新的" + newValue);
                    }
                },
                // 可以监视一般属性也可以监视计算属性
                hehe : {
                    handler(newValue,oldValue)
                    {
                        console.log(this);
                        console.log("hh的老的" + oldValue);
                        console.log("hh的新的" + newValue);
                    }
                }
            }
        });
        vm.$mount("#app");
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <h1>{{msg}}</h1>

        <h1>数字:<input type="text" v-model:value="value"/></h1>

        <h1>监视B:<input type="text" v-model:value="a.b"/></h1>

        <h1>监视C:<input type="text" v-model:value="a.c"/></h1>

        <h1>监视F:<input type="text" v-model:value="a.d.e.f"/></h1>

    </div>

    <script>

        const vm = new Vue({

            data : {

                msg : "Hello",

                value : "",

                a : {

                    b : 0,

                    c : 0,

                    d : {

                        e : {

                            f : 0

                        }

                    }

                }

            },

            computed : {

                hehe()

                {

                    return "hehe" + this.value;

                }

            },

            watch : {

                //可以监视多个属性的

                // 监视什么属性,就把什么属性放在这即可

                value : {

                    immediate : true,

                    // 这里有一个固定写死的方法就叫handler

                    // handler什么时候被调用

                    handler(newValue,oldValue)

                    {

                        // 如果是箭头函数,这个对象是window对象

                        // 依旧不建议箭头函数

                        // 默认是vm对象(vue实例对象)

                        console.log(this);

                        // 这个方法在被监视参数变化时自动调用

                        // handler有两个参数,第一个是newValue,另外一个是oldValue

                        // newValue是属性改变后的新数值,oldValue是改变前的老数值

                        console.log("自带的老的" + oldValue);

                        console.log("自带的新的" + newValue);

                    }

                },

                // 无法监视b属性,因为b属性在data下压根不存在

                // 如果监视的属性具有多级属性,一定要记得添加单引号

                "a.b" : {

                    // 因此我们修改b,a的内存指向压根没变

                    // 只是b的值变化了,所以对于a来说,他没有产生变化

                    // 不会触发变更的handler方法

                    handler(newValue,oldValue)

                    {

                        console.log(this);

                        console.log("自带的老的" + oldValue);

                        console.log("自带的新的" + newValue);

                    }

                },

                "a.c" : {

                    handler(newValue,oldValue)

                    {

                        console.log(this);

                        console.log("自带的老的" + oldValue);

                        console.log("自带的新的" + newValue);

                    }

                },

                "a" : {

                    // 启用深度监视,可以将这个多层级结构的所有属性一并监视

                    deep : true,

                    handler(newValue,oldValue)

                    {

                        console.log(this);

                        console.log("自带的老的" + oldValue);

                        console.log("自带的新的" + newValue);

                    }

                },

                // 可以监视一般属性也可以监视计算属性

                hehe : {

                    handler(newValue,oldValue)

                    {

                        console.log(this);

                        console.log("hh的老的" + oldValue);

                        console.log("hh的新的" + newValue);

                    }

                }

            }

        });

        vm.$mount("#app");

    </script>

</body>

</html>

  • 21
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值