Vue提供了事件的绑定，方法写在methods对象中。
绑定dom中有两种方法：
方法一：v-on:click/dblclcick/mouseOver/mouseOut=“方法名”等等
这种和JQuery的事件差不多，在原生态js中去掉了on。
方法二：@click/dblclcick/mouseOver/mouseOut="方法名"。
相对于方法一，将v-on:替代为@。还是比较好用的。
事件修饰符：stop：阻止事件冒泡。事件冒泡指的是点击子元素，父元素的点击事件也被触发了
prevent：阻止默认事件触发。比如a标签默认点击会跳转，这时可以阻止这个触发
capture：使用捕获模式。html默认事件从里到外进行传播，捕获模式则会从外到进行触发
self：只有当前元素能够触发，既不能通过传播的方式
once：只能触发一次
这几个修饰符可以串联修饰，例如java中的修饰符
例如给a标签：
<div>
<a href="1.jpg" @click.prevent.stop.capture.self></a>
</div>
在Vue2.0也多添加几个按键和鼠标修饰符，这样不用记一些键码。
注意一下，虽然Vue可以让组件自定义事件，但是不要使用驼峰命名法，html会将大写的字母变为小写，
可能导致出不来结果。Vue2.0好像已经不支持绑定的body上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue事件</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> </head>
<body>
<div id=box>
<p>原始的方式</p>
<input type="button" value="点击一下" @click="say1" />
<hr> <p>Vue事件绑定之一 v-on:click/dblclick/...</p>
<input type="button" value="Vue事件绑定之一" v-on:click="say1">
<hr> <p>Vue事件绑定之二 @click/dblclick/...</p>
<input type="button" value="Vue事件绑定之二" @click="say1">
<hr> <p>Vue解决事件冒泡 </p>
<div @click="say1">
<input type="button" value="未解决事件冒泡" @click="say1">
</div>
<div @click="say2">
<p>原始方式解决事件冒泡 </p>
<input type="button" value="原始方式解决事件冒泡" @click="say2($event)">
</div>
<div @click="say3">
<p>Vue方式解决事件冒泡 </p>
<input type="button" value="Vue方式解决事件冒泡" @click.stop="say3()">
</div> <hr>
<p>html默认触发的事件</p>
<a href="http://cpc.people.com.cn/NMediaFile/2017/1018/MAIN201710181352077766232230363.jpg">进入十九大</a>
<p>html $event阻止默认触发的事件</p>
<a href="http://cpc.people.com.cn/NMediaFile/2017/1018/MAIN201710181352077766232230363.jpg" @click="say4($event)">进入十九大</a>
<p>html Vue阻止默认触发的事件</p>
<a href="http://cpc.people.com.cn/NMediaFile/2017/1018/MAIN201710181352077766232230363.jpg" @click.prevent="say5()">进入十九大</a>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#box",
data:{},
methods:{
say1:function(){
console.log(this);
alert("hello v-on");
},
say2:function(ev){
alert("原始方式解决事件冒泡");
ev.cancelBubble=true; },
say3:function(){
alert("Vue方式解决事件冒泡");
},
say4:function(ev){
console.log(this);
alert("阻止默认触发事件");
ev.preventDefault();
},
say5:function(){
console.log(this);
alert("vue阻止默认触发事件");
}
}
}); </script>
</html>