examples.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门之Helloworld</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<div>数字：{{count}}</div>
		<button onclick="reduce()">on调用</button>
		<button onclick="reduceOnce()">once调用</button>
		<button onclick="off()">off调用</button>
	</div>

<script type="text/javascript">
var app = new Vue({
	el:'#app',
	data:{
		count: 1
	}
})
// $on 在构造器外部添加事件
app.$on('reduce',function(){
	console.log('执行了reduce()');
	this.count--;
});
// 调用
function reduce() {
	// 事件调用
	console.log('emit事件调用');
	app.$emit('reduce');
}

// $once执行一次的事件
app.$once('reduceOnce',function(){
	console.log('只执行一次的方法');
	this.count--;
});
// 调用
function reduceOnce() {
	app.$emit('reduceOnce');
}

// 关闭事件
function off(){
	console.log('关闭事件');
	app.$off('reduce');
}
</script>
</body>
</html>