vue组件的watch属性

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>wacth属性</title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <my-component></my-component>
    </div>
    <script>
        Vue.component("my-component",{
            data:function(){
                return {
                    myInput:"",
                    myPhone:123456
                }
            },
            template:`
                <div>
                    <input type="text" v-model="myInput"/>
                    <input type="text" v-model="myPhone"/>
                    <span>{{myInput}}</span>
                </div>
            `,
            watch:{
                myInput:function(){
                //当数据发生变化、执行的操作
              　　  console.log("数据改变");
                },
                myPhone:function(){
                    console.log(this.myPhone);
                }
            }
        })
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>