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>