实例就是在构造器外部操作构造器内部的属性选项和方法，就叫做实例，实例的作用就是给原生的或者其他的JavaScript框架一个融合的接口或者说是机会，让Vue和其他框架一起使用。
一.实例事件就是在构造器外部写一个调用构造器内部的方法，作用是在构造器外部调用构造器内部的数据。
1.通过$on在构造器的外部添加事件
2
3
4
app.$on('reduce',function(){
console.log('执行了reduce()');
this.num--;
});
$on 接受两个参数，第一个是调用的事件名称，第二个是一个匿名方法。
如果按钮在作用域外部就可以利用$emit来执行。
2
3
4
//外部调用内部事件
function reduce(){
app.$emit('reduce');
}
2.$once执行一次的事件
1
2
3
4
5
app.$once('reduceOnce',function(){
console.log('只执行一次的方法');
this.num--;
});
3.$off关闭事件
function off(){app.$off('reduce');}
二.实例方法
1.$mount()方法，用来实现挂载我们的扩展的，经常和extend一起使用
<script type="text/javascript">
var jspang = Vue.extend({
template:`<p>{{message}}</p>`,
data:function(){
return {
message:'Hello ,I am JSPang'
}
}
})
var vm = new jspang().$mount("#app")
</script>
2.$destory()卸载方法
html：
1
<p><button>卸载</button></p>
javascript
1
2
3
function destroy(){
vm.$destroy();
}
PS:$destroy()后边必须要有括号，没有括号是无用的。
3.$forceUpdate()更新方法
vm.$forceUpdate()
4.$nextTick()数据修改方法
function tick(){
vm.message="update message info ";
vm.$nextTick(function(){
console.log('message更新完后我被调用了');
})
}
---------------------
【转载，仅作分享，侵删】
作者：努力_才幸福
原文：https://blog.csdn.net/weixin_38098192/article/details/80312943
版权声明：本文为博主原创文章，转载请附上博文链接！
|
|
收藏
淘帖
踩
