vue实例化后添加变量

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>