## 事件处理
### 监听事件
可以用 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>
~~~
