Vue 提供了 v-on 指令来监听 DOM 事件，在事件绑定上，类似原生 JavaScript 的 onclick 事件写法，也是在 HTML 上进行监听。

Vue 中的事件绑定，语法规则：
v-on :事件名.修饰符=方法名()│方法名|简单的JS表达式
简写:@事件名.修饰符=方法名()|方法名|简单的JS表达式
事件名: click | keydown | keyup/mouseover|mouseout|自定义事件名
直接使用：直接在标签中书写 js 方法：
<div id="app ">
        点击次数{ { count } }
        <button @click="count++">点击+1</button>
</div>
<script type="text/javascript">
           var vm=new vue ( {
                 el: '#app ' ,
                 data : {
                         count : 0
                    }
            })
</ script>
2.调用 methods 的办法
通过 v-on 绑定实例选项属性 methods 中的方法作为事件的处理器
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="say">点击</button>
</div>
<script type="text/javascript">
    var vm= new Vue({
        el: '#app',
        data:{
            msg:'Say Hello'
        },
        methods:{
            say: function () {
                alert(this.msg)
            }
        }
    })
</script>
</body>
</html>
方法传参，方法直接在调用时在方法内传入参数，代码如下：
<div id="app">
        button @click="say ( 'Hello beixi')">点击</button>
        </div>
<script type="text/javascript">
        var vm=new vue ( {
              el: '#app ',
              data : {
                   msg: 'say Hello'
       
 }，
        methods: {
            say: function (val){
                alert (val)
            }
        }
    })
</script>
传入事件对象，代码如下：
<div id="app">
        <button data-aid='123' @click="eventFn ($event)">事件对象</button>
</div>
<script type="text/javascript">
        var vm= new vue ( {
            el : '#app ' ,
            methods : {
                eventFn : function (e) {
                    console.log (e) ;
                    //e.srcElement    dom节点
                    e.srcElement.style.background='red ' ;
                    console.log (e.srcElement.dataset.aid);/*获取自定义属性的值*/
                }
            }
        })
</script>
修饰符 
Vue 为指令 v-on 提供了多个修饰符，方便我们处理一些 DOM 事件的细节，Vue 主要的 修饰符如下：
 .top：阻止事件继续传播，即阻止它的捕获和冒泡过程

@click.stop='handle()' //只要在事件后面加 .stop 就可以阻止事件冒泡
点击内部点击，阻止了冒泡过程，即只执行 inner 这个方法，如果不加.stop， 先执行 inner 方法，后执行 outer 方法。即通过了冒泡这个过程。
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div style="background-color: aqua;width: 100px;height: 100px" v-on:click="outer">
        外部点击
        <div style="background-color: red;width: 50px;height: 50px"  v-on:click.stop="inner">内部点击</div>
    </div>
</div>
<script type="text/javascript">
    var vm= new Vue({
        el: '#app',
        methods:{
            outer: function () {
                console.log("外部点击")
            },
            inner: function () {
                console.log("内部点击")
            }
        }
    })
</script>
</body>
</html>

 

 

.prevent：阻止默认事件，代码如下：
@click.prevent='handle()' //只要在事件后面加 .prevent 就可以阻止默认事件。
如下阻止了 a 标签的默认刷新：
<a href="" v-on:click.prevent>点击</a>

.capture：添加事件监听器时使用事件捕获模式，即在捕获模式下触发，代码如下：
@click.capture='handle()'

如下实例在点击最里层的点击 6 时，outer 方法先执行，因为 outer 方法在捕获模式执行 的，先与冒泡事件。下列执行顺序 outer->set->inner，因为后俩个还是冒泡模式下触发的事 件，代码如下：
<div v-on : click.capture="outer">外部点击5
    <div v-on : click="inner">内部点击5
        <div v-on: click="set">点击6</div>
    </div>
</div>
.self：当前元素自身时触发处理函数时才会触发函数。 
原理是根据 event.target 确定是否当前元素本身，来决定是否触发的事件/函数 。 
如下示例，如果敲击内部点击，冒泡不会执行 outer 方法，因为 event.target 指的是内部 点击的 dom 元素，不是外部点击的，所以不会触发自己的点击事件，代码如下：
<div v-on :click.self="outer">
   外部点击
    <div v-on: click="inner">内部点击</div>
</ div>

.once：只触发一次，代码如下：
<div id="app">
        <div v-on : click.once="once">点击once</div>
</div>
<script type="text/javascript">
    var vm= new vue ( {
    el:  '#app' ,
    methods : {
        once: function () {
            console.log("点击once" )
        }
    }
})
</script>       
键盘事件 
方式一：@keydown='show($event)'
<div id="app">
        <input type="text" @keydown='show ($event) 'l>
    </div>
    <script type="text/javascript">
        var vm= new vue ( {
        el: '#app ' ,
        methods : {
            show : function (ev){
              
  /*在函数中获ev.keycode */
                console.log (ev.keycode) ;
                if (ev.keycode==13) {
                    alert ('你按了回车键!')
                }
            }
        }
    })
    </script>
方式二：
<input type="text" @keyup.enter="show ( ) ">//回车执行
<input type="text" @keydown. up= 'show () '>//上键执行
<input type="text" @keydown.down='show()' >//下键执行
<input type="text" @keydown.left='show ()' > //左键执行
<input type="text" @keydown.right='show ( ) '>//右键执行

 

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--引入bootstrap-->
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div class="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h2>图书管理系统</h2>
        </div>
        <div class="panel-body form-inline">
            <label for="">id：<input type="text" class="form-control" v-model="id"></label>
            <label for="">图书名称：<input type="text" class="form-control" v-model="name"></label>
            <input type="button" value="添加" class="btn btn-primary" @click="add">
        </div>
    </div>
    <table class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>id</th>
            <th>图书名称</th>
            <th>添加时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in arr" :key="item.id">
            <td v-text="item.id"></td>
            <td v-text="item.name"></td>
            <td v-text="item.time"></td>
            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var vm= new Vue({  //创建vue实例
        el:'.app',
        data:{
            arr:[
                {'id':1,'name':'三国演义','time':new Date()},
                {'id':2,'name':'红楼梦','time':new Date()},
                {'id':3,'name':'西游记','time':new Date()},
                {'id':4,'name':'水浒传','time':new Date()}
            ], //创建一些初始数据与格式
            id:'',
            name:''
        },
    })
</script>
</body>
</html>