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; 100px;height: 100px" v-on:click="outer">
外部点击
<div style="background-color: red; 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>