Vue实例的属性和方法

一、Vue之实例属性

Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的数据属性区分

组件树

• $parent：用来访问组件实例的父实例
• $root: 用来访问当前组件树的根实例
• $children:用来访问当前组件实例的直接子组件实例
• $refs:用来访问v-ref指令的子组件

DOM访问

• $el：用来挂载当前组件实例的dom元素
• $els：用来访问$el元素中使用了v-el指令的DOM元素

 - <div id="app2">
       {{ message }} </div> <script>
       var vm2 = new Vue({
           el:"#app2",
           data:{
               message : "I am message."
           }
       });
       console.log(vm2.$el);          //vm2.$el === 原生js中document.getElementById("app2") 
       vm2.$el.style.color = "red";   //变成红色 </script>

数据访问

• $data：用来访问组件实例观察的数据对象
• $options：用来访问组件实例化时的初始化选项对象

DOM方法的使用

• $appendTo(elementOrSelector, callback)：将el所指的DOM元素插入目标元素
• $before(elementOrSelector, callback)：将el所指的DOM元素或片段插入目标元素之前
• $after(elementOrSelector, callback)：将el所指的DOM元素或片段插入目标元素之后
• $remove(callback)：将el所指的DOM元素或片段从DOM中删除
• $nextTick(callback)：用来在下一次DOM更新循环后执行指定的回调函数

event方法的使用

监听

• $on(event, callback)：监听实例的自定义事件
• $once(event, callback)：同上，但只能触发一次

触发

• $dispatch(event, args)：派发事件，先在当前实例触发，再沿父链一层层向上，对应的监听函数返回false停止
• $broadcast(event,args)：广播事件，遍历当前实例的$children，如果对应的监听函数返回false，就停止
• $emit(event, args)：触发事件

<div id="ap2">
    <p>{{ num }}</p>
    <button @click="increase1"> add </button>
</div>
<button onclick="reduce2()"> reduce2 </button> <button onclick="offReduce()"> off reduce </button>
<script>
    var ap2 = new Vue({
        el:"#ap2",
        data:{
            num:5
        },
        methods:{
            increase1:function () {
                this.num ++;
            }
        }
    });
    // .$on定义事件 .$once定义只触发一次的事件
    ap2.$on("reduce",function (diff) {
        ap2.num -= diff ;
    });
 
    // .$emit触发事件
    function reduce2() {
        ap2.$emit("reduce", 2);
    }
 
    // .$off解除事件 解除后，定义的reduce事件将不再执行
    function offReduce() {
        ap2.$off("reduce");
    }
</script>