## 事件處理
### 監聽事件
可以用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。
~~~html
<template>
<div class="event">
<ul>
<li v-on:click="getInfo(phone)" v-for="(phone,index) in phones">
<p>{{phone.name}}</p>
<p>{{phone.price}}</p>
<hr />
</li>
</ul>
</div>
</template>
~~~
~~~javascript
export default{
data(){
return{
phones:[
{
name:"小米mix2",
price:"3999"
},
{
name:"iphone8 plus",
price:"6999"
},
{
name:"三星S9 plus",
price:"7499"
},
{
name:"iphone X",
price:"9999"
}
]
}
},
methods:{
getInfo(phone){
console.log(phone.name);
console.log(phone.price);
}
}
}
~~~
### 事件修飾符
在事件處理程序中調用` event.preventDefault()` 或 `event.stopPropagation()` 是非常常見的需求。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。
為了解決這個問題，Vue.js 為 `v-on` 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。
* stop
* prevent
* capture
* self
* once
~~~html
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
~~~
