15 笔记

最新推荐文章于 2024-10-09 10:13:02 发布

梦梦的小斑鸠

最新推荐文章于 2024-10-09 10:13:02 发布

阅读量54

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CP011522/article/details/127092148

版权

侦听器的基本结构

<body>
    <script>

new Vue({
    el:'',
    data:{},
    methods:{},
    //侦听器
       //用来侦听数据有没有变化，一旦有变化就调用函数。
       //在data，methods这些平级 
       watch:{
        //改变后的值
        //改变前的值
        //要修改的数据，msg(newValue,oldValue)
           msg(newValue,oldValue){
             console.log('改变了',newValue,oldValue);
           }

       }  
})
       
    </script>
    
</body>

侦听器的使用

<body>
    <div id="app">
        <button @click="msg = '马超' ">点击送马超</button>
        <p>{{ msg }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
             msg:'曹操'
            },
            watch:{
                msg(newValue,oldValue){
                    console.log('改变了',newVlaue,oldValue);
                }
            }
              
        })
    </script>

<body>
    <div id="app">
        <button @click="list.push('毒华佗')">点击送毒华佗</button>
        <button @click="list.pop()">删除一个项</button>
        <!--利用索引值改变数组时，不能被侦听到。-->
        <button @click="list[0]='许褚'">修改第一项</button>
        <button @click="list.splice(1,0,'马超')">第二项添加</button>
        <u1>
        <li v-for="item in list"> {{item }}
        </1i>
        </u1>
    </div>
        <script src="./vue.js"></script>
        <script> 
        new Vue({
             el:'#app',
              data:{
          list:['金马超','刘备','张飞','关羽']
          },
          watch:{
          list(){
          conso1e.log('数组改变了');
           }
        }
        })
        </script>
</body>

<body>
    <body>
        <!-对对象进行侦听->
        <div id="app">
             <p>{{obj.name }} --- {{obj.age }} --- {{ obj.height }}</p>
        <button @click="obj.name='rose'">修改obj的name属性</button>
        <button @click="obj.age=30">修改obj的age属性</button>
        <button @click="obj={name:'andy',age:99}">修改obj的指向</button>
        </div>
        <script src="./vue.js"></script>
        <script>
        new Vue({
          el:'#app',  
          data:{
          obj:{
          name:'jack',
          age:16,
          height:175
          }
         },
        watch:{
        //这种写法侦听不到obj对象内部属性的变化，
        //只能侦听到obj对象指向的变化。
        //obj(){
        //console.1og('obj变化了')；
        //},
        //如果想侦听到对象里属性的变化
        //侦听obj里name的变化（要记得加引号）
        //"obj.name"()
        //console.log('name变化了')；},
        //可是这样写只能侦听一个属性。
      //如果希望侦听到对象里所有属性的变化，就要开启深度侦听。
  obj:{
   //当有变化会调用的函数
   handler(){
   console.log('obj的属性变化了');
   }
  //开启深度侦听
  //deep:true,
   //要不要当前页面一打开就立即调用nandler函数。
   //给true表示立即调用，默认是f1ase。（代表只有改动了才调用
   //immediate:true
   }
   }
})
</script>
    
</body>