8. 事件处理

绑定监听

• v-on:xxx="fun"
• @xxx="fun"
• @xxx="fun(参数)"
• 默认事件形参: event
• 隐含属性对象: $event

事件修饰符

• .prevent : 阻止事件的默认行为 event.preventDefault()
• .stop : 停止事件冒泡 event.stopPropagation()

按键修饰符

• .keycode : 操作的是某个 keycode 值的键
• .keyName : 操作的某个按键名的键(少部分)

编码

<div id="example">
	<h2>1. 绑定监听</h2>
	<button v-on:click="test1">Greet</button>
	<button @click="test1">Greet2</button>
	<button @click="test2($event, 'hello')">Greet3</button>
	<h2>2. 事件修饰符</h2>
	<!-- 阻止事件默认行为 -->
	<a href="http://www.baidu.com" @click.prevent="test3">百度一下</a>
	<br/>
	<br/>
	<!-- 停止事件冒泡 -->
	<div style=" 200px;height: 200px;background: red" @click="test4">
	<div style=" 100px;height: 100px;background: green"
	@click.stop="test5"></div>
	</div>
	<h2>3. 按键修饰符</h2>
	<input @keyup.8="test6">
	<input @keyup.enter="test6">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
	el: '#example',
	data: {
		name: 'Vue.js'
	},
	methods: {
		test1 (event) {
		// 方法内 `this` 指向 vm
		// alert('Hello ' + this.name + '!')
		// `event` 是原生 DOM 事件
		alert(event.target.innerHTML)
		},
		test2 (event, msg) {
		alert(event.target.innerHTML + '---' + msg)
		},
		test3() {
		alert('阻止事件的默认行为')
		},
		test4() {
		alert('out')
		},
		test5() {
		alert('inner')
		},
		test6(event) {
		alert(event.keyCode + '---' + event.target.value)
		}
	}
})
</script>