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>