一.实例属性 $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>