VUE框架后期添加监视与监视的简写形式------VUE框架

绝地灬酷狼 2024-02-17 11:43 64阅读 0赞

> ###  ###
> 
>     <!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>
>             <h1>后期监视:<input type="text" v-model:value="number"/></h1>
>         </div>
>         <script>
>             const vm = new Vue({
>                 data : {
>                     msg : "Hello",
>                     value : "",
>                     a : {
>                         b : 0,
>                         c : 0,
>                         d : {
>                             e : {
>                                 f : 0
>                             }
>                         }
>                     },
>                     number : 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);
>                         }
>                     },
>                     // 当只有handler没有immediate或者deep的时候可以使用简写形式来写
>                     "a.c"(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");
>             // 如何后期添加监视,调用vue的api即可
>             // 语法是vm.$watch("被监视的属性名",{监视的配置项})
>             vm.$watch("number",{
>                 immediate : true,
>                 deep : true,
>                 handler(newValue,oldValue)
>                 {
>                     console.log("新属性的新值是" + newValue);
>                     console.log("新属性的旧值是" + oldValue);
>                 }
>             });
>             // 这是后期添加的简写形式
>             vm.$watch("msg",function(newValue,oldValue){
>                 console.log("新属性的新值是" + newValue);
>                 console.log("新属性的旧值是" + oldValue);
>             });
>         </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>
> 
> <h1>后期监视:<input type="text" v-model:value="number"/></h1>
> 
> </div>
> 
> <script>
> 
> const vm = new Vue(\{
> 
> data : \{
> 
> msg : "Hello",
> 
> value : "",
> 
> a : \{
> 
> b : 0,
> 
> c : 0,
> 
> d : \{
> 
> e : \{
> 
> f : 0
> 
> \}
> 
> \}
> 
> \},
> 
> number : 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);
> 
> \}
> 
> \},
> 
> // 当只有handler没有immediate或者deep的时候可以使用简写形式来写
> 
> "a.c"(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");
> 
> // 如何后期添加监视,调用vue的api即可
> 
> // 语法是vm.$watch("被监视的属性名",\{监视的配置项\})
> 
> vm.$watch("number",\{
> 
> immediate : true,
> 
> deep : true,
> 
> handler(newValue,oldValue)
> 
> \{
> 
> console.log("新属性的新值是" + newValue);
> 
> console.log("新属性的旧值是" + oldValue);
> 
> \}
> 
> \});
> 
> // 这是后期添加的简写形式
> 
> vm.$watch("msg",function(newValue,oldValue)\{
> 
> console.log("新属性的新值是" + newValue);
> 
> console.log("新属性的旧值是" + oldValue);
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>