# 事件处理

# v-on 指令

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event **属性： **v-on:click="handle('ok', $event)"。

v-on 执行简单的表达式

<div id="example-1">
	<button v-on:click="counter += 1">Add 1</button>
	<p>The button above has been clicked {{ counter }} times.</p>
</div>
<script>
	var example1 = new Vue({
		el: "#example-1",
		data: {
			counter: 0,
		},
	});
</script>

v-on 执行函数

<div id="example-1">
	<button v-on:click="add">Add 1</button>
	<p>The button above has been clicked {{ counter }} times.</p>
</div>
<script>
	var example1 = new Vue({
		el: "#example-1",
		data: {
			counter: 0,
		},
		methods: {
			add() {
				this.counter++;
			},
		},
	});
</script>

v-on 简写 @

<button @click="alert(1)"></button>

常用事件函数用 v-on 给每个按钮分别添加不同的事件，来向数组追加元素。

<div id="box">
	<input type="button" value="按钮1click" v-on:click="add()" />
	<input type="button" value="按钮2mouseover" v-on:mouseover="add()" />
	<input type="button" value="按钮3mouseout" v-on:mouseout="add()" />
	<input type="button" value="按钮4mousedown" v-on:mousedown="add()" />
	<input type="button" value="按钮5mouseup" v-on:mouseup="add()" />
	<input type="button" value="按钮6dblclick" v-on:dblclick="add()" />
	<hr />
	<ul>
		<li v-for="value in arr">
			{{value}}
		</li>
	</ul>
</div>
<script type="text/javascript">
	new Vue({
		el: "#box",
		data: {
			arr: ["apple", "banana", "orange", "pear"],
		},
		methods: {
			add: function() {
				//方法
				this.arr.push("tomato");
			},
		},
	});
</script>

事件对象有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<div id="box">
	<input type="button" value="按钮" v-on:click="show()" />
	<input type="button" value="按钮" @click="show($event)" />
	<input type="button" value="按钮" @click="show($event,12)" />
</div>
<script type="text/javascript">
	new Vue({
		el: "#box",
		data: {},
		methods: {
			show: function(ev, b) {
				//相对与浏览器可视区域的坐标
				alert(ev.clientX);
				alert(b);
			},
		},
	});
</script>

# 事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。常用事件修饰符

.stop 阻止事件冒泡
.prevent 阻止默认事件

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

按键修饰符在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<div id="box">
	<!-- 回车 13 -->
	<input type="text" value="按钮" @keyup.13="show()" />
	<input type="text" value="按钮" @keyup.enter="show()" />
	<input type="text" value="按钮" @keyup.up="show()" />
	<input type="text" value="按钮" @keyup.down="show()" />
	<input type="text" value="按钮" @keyup.left="show()" />
	<input type="text" value="按钮" @keyup.right="show()" />
</div>
<script type="text/javascript">
	new Vue({
		el: "#box",
		data: {},
		methods: {
			show: function() {
				alert("你按回车了");
			},
		},
	});
</script>

← Class 与 Style 绑定组件 →