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="width: 200px;height: 200px;background: red" @click="test4">
	<div style="width: 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>