vue实例的简单属性和方法调用

$mount（） // 等同于 el：

  <div id="box">
        {{a}}
    </div>
    <script>
        var vm=new Vue({
            data:{
                a:1
            }
        }).$mount("#box");
    </script>

vm.$data. //对其 data 对象属性的访问

  <div id="box">
        {{a}}
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:1
            }
        });

        console.log(vm.$data.a);
    </script>
    //console结果为 1

vm.$options //自定义属性

 <div id="box">
        <span v-text="a"></span>
        <br>
        {{aa}}
    </div>
    <script>

        var vm=new Vue({
            aa:11, //自定义属性,
            show:function(){
                alert(1);
            },
            data:{
                a:1
            }
        }).$mount('#box');
        console.log(vm.$options.aa);  //console出来是11
        vm.$options.show();
        </script>

vm.$watch() //实列数据变化监听

简单监听

<div id="box">
        {{a}}
</div>
var vm=new Vue({
                el:'#box',
                data:{
                    a:111
                }
            });
            vm.$watch('a',function(){
                alert('发生变化了');
            });

            document.onclick=function(){
                vm.a=1;
            };
        //就是当你点页面的时候执行了一个方法 会被vm.$watch监听到了
        //可以做一些业务代码

如果监听的属性是基本数据类型，上面用法是没有问题的，但如果监听的属性是对象，则对象内部的数据有变化，上面写法是监听不到的，需要进行一个参数进行深度监听

      var vm=new Vue({
                el:'#box',
                data:{
                    a:{name:'strive',age:16},
                    b:2
                }
            });

            vm.$watch('a',function(){
                alert('发生变化了');
            },{deep:true});//这里就是深度监听

            document.onclick=function(){
                vm.a.name='aaa';
            };