vue实例化后在外部添加数据需要提前占位，使用 $data 方法添加
<body> <!-- 实例化后添加变量 --> <div id="div1"> <p>{{a}}</p> <p>{{b}}</p> </div> <!-- 给页面元素添加事件 --> <div id="div2"> <p v-on:click="Pclick">click{{todos[0]}}</p> <p v-on:mouseover="Pmouseover">mouseover</p> </div> <script> // 实例化后添加数据 var vm1 = new Vue({ el:"#div1", data:{ a:1, b:null//在实例化后添加变量需要提前设置变量的值为null或者undefined，用来占位 } }); //调用$data方法来添加数据 vm1.$data.b = 5; // 给页面元素添加事件 var vm2 = new Vue({ el:"#div2", data:{ todos:["1111","222222"], a:1 }, // 添加事件 methods:{ Pclick:function(e){ alert(e.target.innerHTML);//获取当前点击元素的内容 }, Pmouseover:function(){ // console.log(2)//mouseover事件 this.a++ } }, // 监听数据a的变化 watch:{ //后面跟个方法，参数一是变化后的值，参数二为变化之前的值 "a":function(newVal,oldVal){ console.log(newVal,oldVal); } } }) </script> </body>