<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin-bottom: 30px;
}
</style>
<script src="js/vue.js"></script>
<script src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
1.可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。
<div id="demo1">
<button v-on:click="counter+=1">增加1</button>
<p>这个按钮被点击了{{counter}}次</p>
</div>
2.许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。
<div id="demo2">
<!--greet 是下面定义的方法-->
<button v-on:click="greet">Greet</button>
</div>
3.内联处理器方法
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：
<div id="demo3">
<button v-on:click="say('hi')">say hi</button>
<button v-on:click="say('qu ni ma')">say hehe</button>
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
</div>
4.事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上. 如果你还没有阅读关于组件的文档，现在大可不必担心。
5.按键修饰符
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
2.1.0 新增
可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。
.ctrl
.alt
.shift
.meta
注意：在Mac系统键盘上，meta对应命令键 (⌘)。在Windows系统键盘meta对应windows徽标键(⊞)。在Sun操作系统键盘上，meta对应实心宝石键 (◆)。在其他特定键盘上，尤其在MIT和Lisp键盘及其后续，比如Knight键盘，space-cadet键盘，meta被标记为“META”。在Symbolics键盘上，meta被标记为“META” 或者 “Meta”。
例如:
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
Note that modifier keys are different from regular keys and when used with keyup events, they have to be pressed when the event is emitted. In other words, keyup.ctrl will only trigger if you release a key while holding down ctrl. It won’t trigger if you release the ctrl key alone.
Mouse Button Modifiers
New in 2.2.0
.left
.right
.middle
These modifiers restrict the handler to events triggered by a specific mouse button.
为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离（separation of concern）传统理念。不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2.因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
<script>
var demo1 = new Vue({
el:'#demo1',
data:{
counter:0
}
})
var demo2 = new Vue({
el:'#demo2',
data:{
name:'vue.js'
},
//在methods对象中定义方法
methods:{
greet:function (event) {
//'this'在方法里指当前的vue实例
alert('hello '+this.name+'!!!!!!!!')
//event是原生的dom事件
if(event){
alert(event.target.tagName)//弹出触发事件的dom元素
}
}
}
})
var demo3=new Vue({
el:'#demo3',
methods:{
say:function (message) {
alert(message)
},
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}
})
// 也可以用 JavaScript 直接调用方法
//demo2.greet() // -> 'Hello Vue.js!'
</script>
</body>
</html>