vue基础---05侦听器

00.watch（普通监听属性）

<!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>
    Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
    <div id="app">
        {{msg}}
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                msg:"hello word!"
            },
            watch:{//监听事件，当mag值发生改变时，就会触发下面的函数
                msg:function(val){//val表示修改后的内容
                    console.log("监听事件-----msg");
                }
            }
        })
    </script>
</body>
</html>
<!-- 在控制台输入app.msg="hello"修改msg来触发监听 -->

01.使用普通函数的形式定义的 watch 侦听器，在页面首次加载后不会被调用。

watch: {
   // 定义 total 侦听器，指向一个配置对象
   total: {
      // handler 属性用来定义侦听器的 function 处理函数
      handler(newVal) {
         const findResult = this.options.find(x => x.text === '购物车')
         if (findResult) {
            findResult.info = newVal
         }
      },
      // immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
      immediate: true
   }
}

02.get和set

<!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">
        set设置后的值：{{msg}}<br/>
        get获取的值显示在这里：{{reverseMsg}}</h1>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                msg:"hello word"
            },
            computed:{
                reverseMsg:{
                    // get:function(){
                    //     return this.msg.split("").reverse().join("")
                    // }, 
                    // set:function(value){
                    //     this.msg=value.split("").reverse().join("") 
                    // }
                },
                reverseMsg:function(){
                    return this.msg.split("").reverse().jojn("")
                }
            },
            watch:{
                msg:function(val){
                        console.log("监听事件---msg");
                }
            }
        })
    </script>
</body>
</html>

posted @ 2021-09-10 11:51 !ment 阅读(77) 评论(0) 编辑收藏举报

刷新页面返回顶部

目录

!ment

vue基础---05侦听器