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

来源：互联网发布：sql的exists 编辑：程序博客网时间：2024/06/15 14:51

$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';            };

0 0