Vue v-on指令

Vue v-on教程

Vue v-on 指令用于绑定事件监听器，v-on 指令的简写形式为 @event。Vue v-on 指令可以支持同时写多个事件监听器，多个事件监听器的简写形式为 v-on={@event1:handler1, @event2:handler2}。

Vue v-on 指令支持原生 JavaScript 的所有的事件，并且支持参数传递。

Vue v-on事件修饰符

事件修饰符	描述
Vue v-on .stop	阻止事件冒泡。
Vue v-on .prevet	阻止事件的默认行为。
Vue v-on .capture	添加事件侦听器，使用事件捕获模式。
Vue v-on .self	只当事件在该元素本身触发时，触发回调。
Vue v-on .once	事件只触发一次。

案例

Vue v-on绑定事件

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-on标签</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="按钮" v-on:click="show">
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{},
		methods:{
			show:function(){
				alert('Hello HaiCoder!');
			}
		}
	})
</script>
</html>

浏览器运行后，点击 button 按钮，弹出了对话框，效果如下图所示：

11 vue von.png

即，我们使用了 Vue v-on 指令，绑定了 button 的 click 事件，当 button 的 click 事件触发时，调用 Vue 实例对象的 methods 里面的 show 方法。

Vue v-on简写形式

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-on 标签</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="按钮" @mouseover="show">
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{},
		methods:{
			show:function(){
				alert('Hello HaiCoder!');
			}
		}
	})
</script>
</html>

浏览器运行后，鼠标移动到 button 按钮，弹出了对话框，效果如下图所示：

12 vue von.png

即，我们使用了 Vue v-on 指令，绑定了 button 的 mouseover 事件，当 button 的 mouseover 事件触发时，调用 Vue 实例对象的 methods 里面的 show 方法。

Vue v-on多个事件监听

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-on 标签</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="按钮" @mouseleave="onLeave" @mouseover="onOver">
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{},
		methods:{
			onOver:function(){
				console.log('onOver!');
			},
			onLeave:function(){
				console.log('onLeave!');
			}
		}
	})
</script>
</html>

浏览器运行后，鼠标移动到 button 按钮，触发了 onOver 事件，移出 button 按钮，触发了 onLeave 事件，效果如下图所示：

13 vue von.png

我们使用了 v-on 监听了多个事件。

Vue v-on多个事件监听简写

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-on 标签</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="按钮" v-on='{mouseenter:onOver, mouseleave:onLeave}' v-on:click="onClick">
         <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{},
		methods:{
			onOver:function(){
				console.log('onOver!');
			},
			onLeave:function(){
				console.log('onLeave!');
			},
			onClick:function(){
				console.log('onClick!');
			}
		}
	})
</script>
</html>

浏览器运行后，鼠标移动到 button 按钮，触发了 onOver 事件，移出 button 按钮，触发了 onLeave 事件，点击 button 按钮，触发了 onClick 事件，效果如下图所示：

14 vue von.png

我们使用了 v-on 简写的形式，监听了多个事件。

Vue v-on事件传参

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-on 标签</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="按钮" @click='onClick(1,2)'>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{},
		methods:{
			onClick:function(param1, param2){
				console.log('Result=',param1+param2);
			}
		}
	})
</script>
</html>

浏览器运行后，点击 button 按钮，触发了 onClick 事件，同时传递参数 1 和 2，最终在浏览器控制台打印出了 1+2 的结果，效果如下图所示：

15 vue von.png

我们使用了事件传参。

Vue v-on指令总结

Vue v-on 指令用于绑定事件监听器，v-on 指令的简写形式为 @event。

Vue v-on 指令可以支持同时写多个事件监听器，多个事件监听器的简写形式为 v-on={@event1:handler1, @event2:handler2}。