初识vue02

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>
posted @ 2020-08-08 22:52  L小龙虾  阅读(99)  评论(0编辑  收藏  举报