1.监听事件（在 v-on 中使用变量）
监听事件用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>监听事件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <button v-on:click="counter += 1">共点击了{{ counter }}次</button> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { counter: 0, }, }); </script>
2.事件处理方法（在 v-on 中使用方法名）
许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>事件处理方法</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function(event) { // `this` 在方法里指向当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } }, }); </script>
3.内联处理器中的方法（在v-on 中使用方法名 + 参数）
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>内联处理器中的方法</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <button v-on:click="say('springboot!')">springboot</button> <button v-on:click="say('vue!')">vue</button> </div> </body> </html> <script> var app = new Vue({ el: "#app", methods: { say: function(message) { alert(message) } }, }); </script>
4.事件修饰符
在原生DOM绑定事件的年代，我们经常会使用到e.preventDefault() 或 e.stopPropagation()等操作。
document.getElementById('menu').onclick = function(e) {
e.preventDefault();
//...
}
Vue.js 为了简化这种常见需求，为v-on提供了一个叫Event Modifiers (事件修饰符)的语法糖。事件修饰符：
.stop 阻止事件向上冒泡，等价于添加event.stopPropagation()
.prevent 阻止元素发生默认的行为，等价于添加event.preventDefault()
.capture 在捕获阶段触发监听函数
.self 只当 event.target === event.currentTarget 时触发处理函数
.once 事件将只会触发一次
.passive 表示 listener 永远不会调用 preventDefault()
W3C的DOM标准中，一次事件包含三个步骤：捕获 -> 到达目标 -> 冒泡
当点击Inner标签时，事件传播顺序是 Outer -> Middle -> Inner -> Inner -> Middle -> Outer。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>事件修饰符</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> main { background: #AC2925; padding: 20px; } section { background: #C0A16B; padding: 20px; } a { background: #BCE8F1; padding: 20px; } </style> <body> <div id="app"> <main v-on:click="listener($event, 'Outer')"> Outer <section v-on:click="listener($event, 'Middle')"> Middle <a v-on:click="listener($event, 'Inner')"> Inner </a> </section> </main> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: {}, methods: { listener: function(e, msg) { const current = e.currentTarget.nodeName console.log(`${current} ${msg}`) }, }, }); </script>
4.1 事件捕获阶段（event capturing）
通俗来说就是当点击Inner标签后，浏览器会从根节点由外到内进行事件传播。
Outer -> Middle -> Inner
4.2 事件冒泡阶段 （event bubbling）
捕获阶段结束后，事件到达目标元素，接着就开始从内往外传播事件。
Inner -> Middle -> Outer
5. $event
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。
$event是指当前触发的是什么事件（鼠标事件，键盘事件等）。
$event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素。
focus （元素获得焦点)
blur (元素失去焦点)
click （单击 鼠标左键）
dblclick (双击鼠标左键)
contextmenu (单机鼠标右键)
mouseover (指针移到有事件监听的元素或者它的子元素内)
mouseout (指针移出元素，或者移到它的子元素上)
keydown （键盘动作： 按下任意键)
keyup (键盘动作： 释放任意键)