Vue事件对象，事件修饰符和按键修饰符

    <div id="app">
        <button data-aid="123" @click="evenFn($event)">事件对象</button><br />
        <button  @click="warn('传入的参数',$event)">绑定多个事件对象</button><br />
        <button @click="one(),two()">一次触发多个方法</button><br />
        <a href="http://www.baidu.com" target="_blank" @click="afn1($event)">通过$event来阻止页面跳转</a><br />
        <a href="http://www.baidu.com" target="_blank" @click.prevent="afn2()">通过案件修饰符来阻止页面跳转</a><br />
        <input type="text" @keyup="doSearch($event)"> <br /><!--缺点是会触发多次-->
        <input type="text" @keyup.enter="doSearch2()"> <br /><!--案件修饰符-->
    </div>
    <script type="text/javascript">
        var vue = new Vue({
            el: "#app",
            data: {

            },
            methods:{
                evenFn: function (e) {
                    console.log(e);
                    e.srcElement.style.background = "red";
                    console.log(e.srcElement.dataset.aid);
                },
                warn: function (message,event) {
                    if(event){
                        event.preventDefault();
                    } alert(message);
                },
                one: function () {
                    alert("one")
                },
                two: function () {
                    alert("two")
                },
                afn1: function (e) {
                    e.preventDefault();
                },
                afn2: function () {

                },
                doSearch: function (e) {
                    console.log(e);
                    console.log(e.keyCode);
                    if (e.keyCode == 13)//对应的是回车{
                        alert("按了回车建");
                },
                doSearch2: function () {
                    alert("按了回车建");
                },             
        }
        })
    </script>

vue事件修饰符：
  (1).stop // 阻止事件继续传播 即阻止它的捕获和冒泡过程

（2）.prevent //阻止默认事件发生 即event.preventdefault():

（3）.capture // 添加事件监听器时使用事件捕获模式，即在捕获模式下触发

（4）.self //当前元素自身时触发处理函数时才会触发函数，原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数

（5）.once //只触发一次
vue按键修饰符：

.enter => // enter键

.tab => // tab键

.delete (捕获“删除”和“退格”按键) => // 删除键

.esc => // 取消键

.space => // 空格键

.up => // 上

.down => // 下

.left => // 左

.right => // 右

运行结果图

：