事件处理-注册事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"><h1>{{message}}</h1><!-- 当事件的处理代码比较少时，可以直接将代码写到行内。 --><button type="button" v-on:click="message = message.split('').reverse().join('')">颠倒字符串顺序</button><!-- 当事件的处理代码比较多时，可以将代码写到一个单独的函数中，然后将函数的名称赋值为 v-on 指令，此时，事件对象会被作为唯一的参数自动传入到函数中。 --><button type="button" v-on:click="sayHello">调用 sayHello() 函数，并自动传入事件对象</button><!-- 如果需要给事件处理函数传递参数，则需要在行内调用处理函数，并为函数传递参数。此时，事件对象不会再被自动传入处理函数中，需要通过 $event 变量手动传入。 --><button type="button" v-on:click="greeting('黄聪聪', $event)">调用 greeting() 函数，需要手动传入事件对象</button></div><script src="./vue.js"></script><script>new Vue({data: {message: 'Hello World!'},methods: {sayHello: function (evt) {console.log(evt)console.log(this.message)},greeting: function (who, evt) {console.log(evt)console.log('你好，' + who, evt)}}}).$mount('#app')// v-on 指令注册事件</script></body></html>
事件处理-修饰符
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"><!-- 使用 prevent 修饰符阻止 a 标签的默认行为 --><a href="" v-on:click.prevent="doThis">点我</a><!-- 使用 prevent 修饰符阻止 form 标签的默认行为 --><form action="" method="post" @submit.prevent="onSubmit"><p><label>用户名：<input type="text" name="username"></label></p><p><input type="submit" value="登录"></p></form><!-- 使用 stop 修饰符阻止事件传播 --><h1 @click="doThat"><a href="" v-on:click.prevent.stop="doThis">点我</a></h1><!-- 使用 once 修饰符注册只执行一次的处理程序 --><h1 @click="doThat"><a href="" v-on:click.prevent.stop.once="doThis">点我</a></h1><!-- 使用 capture 修饰符让我们的处理程序在捕获阶段执行 --><h1 @click.capture="doThat"><a href="" v-on:click.prevent.capture="doThis">点我</a></h1><!-- 使用 self 修饰符指定当事件目标（event.target）为自身时才执行处理程序。（也就是说，只有鼠标点的目标为 h1 元素时，h1 身上注册的事件才会触发 ） --><h1 @click.self="doThat" style="border: 1px solid green;"><a href="" v-on:click.prevent="doThis" style="border: 1px solid red;">点我</a></h1></div><script src="./vue.js"></script><script>new Vue({data: {message: 'Hello World!'},methods: {doThis: function (evt) {// 阻止 a 标签的默认行为// evt.preventDefault();// 阻止事件传播// evt.stopPropagation();console.log('doThis')},doThat: function (evt) {console.log('doThat')},onSubmit: function (evt) {// 阻止 form 标签的默认行为// evt.preventDefault();console.log(this.message)}}}).$mount('#app')</script></body></html>
事件处理-键盘事件的修饰符
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"><!-- 使用按键码作为修饰符，就是事件对象中的 event.keyCode 属性对应的值 --><p><input type="text" @keyup.13="onKeyup"></p><!-- 使用按键名称作为修饰符，就是事件对象中的 event.key 属性对应的值注意，如果按键名称由多个单词组成，则单词要写成小写形式，并且单词之间以连接符（-）分隔，例如，PageUp，应该写成 page-up。如果按键名称只有一个单词，则写成小写形式，比如，Enter，应该写成 enter --><p><input type="text" @keyup.page-up="onKeyup"></p><p><input type="text" @keyup.enter="onKeyup"></p><!-- 指定多个按键名称时，即可生成组合键，例如，必须要同时按着 Ctrl + b 才能触发下面的事件。 --><p><input type="text" @keyup.ctrl.b="onKeyup"></p><!-- 使用自定义的按键名称作为修饰符 --><p><input type="text" @keyup.e="onKeyup"></p><p><input type="text" @keyup.ctrl-b="onKeyup"></p></div><script src="./vue.js"></script><script>// 我们还可以为按键指定别名，方便在页面中使用。Vue.config.keyCodes = {e: 13, // 为 keyCode 值为 13 的按键（enter）指定别名：e，此操作不会与按键 'e' 冲突，因为 'e' 对应的 keyCode 不是 13'ctrl-b': [17, 66]}new Vue({data: {message: 'Hello World!'},methods: {onKeyup: function (event) {console.log(event.key)console.log(event.keyCode)console.log(event.target.value)}}}).$mount('#app')</script></body></html>
事件处理-系统修饰符
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"><!-- 使用系统修饰符配置组合键，例如，ctrl + b --><p><input type="text" @keyup.ctrl.b="onKeyup"></p><!-- 使用系统修饰符配置组合操作，例如，下面的按钮必须按着 Ctrl 点击才有效果 --><p><button type="button" @click.ctrl="onClick">按着 Ctrl 点我</button></p><!-- 使用 exact 修饰符配置精准的组合操作，组合键必须精准匹配时才有效果shift + ctrl + b 无效alt + ctrl + b 无效ctrl + b 有效 --><p><input type="text" @keyup.ctrl.b.exact="onKeyup"></p></div><script src="./vue.js"></script><script>/* 系统修饰符：ctrlaltshiftmeta windows 系统上对应的是 windows 键，Mac 系统上对应的 command 键*/new Vue({data: {message: 'Hello World!'},methods: {onKeyup: function (event) {console.log(event.key)console.log(event.keyCode)console.log(event.target.value)},onClick: function (event) {console.log(event)}}}).$mount('#app')</script></body></html>
事件处理-鼠标修饰符
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"><p><button type="button" @click.left="onClick">鼠标左键点击时触发</button></p><p><button type="button" @click.middle="onClick">鼠标滚轮点击时触发</button></p><p><button type="button" @click.right="onClick">鼠标右键点击时触发</button></p></div><script src="./vue.js"></script><script>new Vue({data: {message: 'Hello World!'},methods: {onClick: function (event) {console.log(event)}}}).$mount('#app')</script></body></html>
事件处理-注册时间 // 事件处理-修饰符 // 事件处理-键盘事件的修饰符 // 事件处理-系统修饰符 // 事件处理-鼠标修饰符
