Vue2 实例属性 实例方法 实例事件

一.实例属性 $el

<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>

二.实例方法  $destroy  $forceUpdate  $mount  $nextTick

<div id="app">
</div>
<button οnclick="vm.$destroy()">销毁实例 $destroy</button>
<button οnclick="vm.$forceUpdate()">刷新构造器 $forceUpdate</button>
<button οnclick="edit()">更新 $.nextTick(fn)</button>
<script>
    var Header = Vue.extend({
        template:`<p>{{ message }}</p>`,
        data:function () {
            return {
                message:"I am message"
            }
        },
        updated:function () {
            console.log("updated 更新之后");
        },
        destroyed:function () {
            console.log("destroy 销毁之后");
        }
    });
    var vm = new Header().$mount("#app");

    function edit() {
        vm.message = "new message";     //更新数据
        vm.$nextTick(function () {      //更新完成后调用
            console.log("更新完后，我被调用");
        })
    }
</script>

三. 实例事件  $on  $once  $emit  $off

<div id="ap2">
    <p>{{ num }}</p>
    <button @click="increase1"> add </button>
</div>
<button οnclick="reduce2()"> reduce2 </button> <button οnclick="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>