初识vue02

2020-08-08 23:02:22 作者：互联网

2.vue的数据与方法

<body>
<div id="app">
    {{message}}
</div>
<script>
    let method={message:'hello~lobster'};
    let app = new Vue({
        el:'#app',
        data:method          //结果是hello~lobster
        /*
         这里的method指的是前面我写好的method方法，也可以写成data:{
                                                              message: 'hello~lobster'
                                                                  }
         */
    })
    method.message='hello',   //这时message的内容将会被更改成hello
    app.message='hi'         //这时message的内容将会是被改成hi
    //app.message==method.message


</script>
</body>

<body>
<div id="app">
    {{message}}
</div>
<script>
    let method={message:'hello~lobster'};
    let app = new Vue({
        el:'#app',
        data:method          //结果是hello~lobster
        /*
         这里的method指的是前面我写好的method方法，也可以写成data:{
                                                              message: 'hello~lobster'
                                                                  }
         */
    })
      //$watch方法要写在初始赋值与更改值之间！即现在这个位置
    app.$watch('message',function (newVal,oldVal) {//newVal指的是message新的值,oldVal旧的值
        console.log(newVal,oldVal) //控制台输出的结果是hello hello~lobster（刚好newVal,oldVal的位置对应上了)
    })
    method.message='hello'       //这时message的内容将会被更改成hello
 
</script>
</body>

标签：vue02,app,hello,oldVal,初识,lobster,message,method
来源： https://www.cnblogs.com/lobster123/p/13460851.html