- 基本应用
- 修饰符
- 为什么要在HTML中使用事件监听
- Demo
一、基本应用
1.通过v-on指令绑定事件，例如： <button v-on:click="">提交</button> ；
在vue官方教程上第一个示例是直接在表达式中写入一个可执行计算代码：
<button v-on:click="conter += 1">add 1</button> //conter是一个data数据，触发点击事件后可以直接将计算的最新结果渲染到页面
2.通过methods实现事件函数绑定，例如：
1 <div id="example"> 2 <button v-on:click="greet">Greet</button> 3 </div> 4 <script> 5 var vm = new Vue({ 6 el:"#example", 7 data:{ 8 name:"vuejs" 9 }, 10 methods:{ 11 greet(event){ 12 alert("hello!" + event.target.tagName + "的" + this.name + "事件click"); 13 } 14 } 15 }); 16 </script>
2.给事件函数传递参数：这是后就需要使用变量$event实现传入事件源对象了。
1 <button v-on:click="greet('vuejs',$event)">Greet</button> 2 greet(message,event){ 3 alert("hello!" + event.target.tagName + "的" + message + "事件click"); 4 }
二、修饰符
- 事件修饰符
- 按键修饰符与按键码
- 系统修饰符
- exact修饰符
- 鼠标按钮修饰符
修饰符可以理解为处理相关事件的特殊情况，实现方法就是在事件名称后面以后缀的形式添加指定的修饰符。
1.事件修饰符：https://cn.vuejs.org/v2/guide/events.html#事件修饰符
.stop：阻止单击事件继续传播；
.prevent：只有修饰符，提交事件不再重载页面，修饰符可串联；
.capture：添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在自身处理，然后交由内部元素进行处理；
.self：只有在event.target是当前元素自身时出发处理函数，即事件不是从内部元素触发的；
.once：点击事件将只触发一次；
.passice：滚动事件会立即触发，不会等待其他串联事件。即prevent会失效。
2.按键修饰符与按键码
.enter:只有在‘key’是‘Enter’时调用事件处理函数 <input v-on:keyup.enter="submit"> ；
.kebab-case:可以将keyboardEvent.key暴露的任意有效按键名转换为kebab-case来作为修饰符，意思是通过串联符‘-’来表示键盘上的驼峰命名按键事件，实现$event.tey指定键盘上驼峰命名按钮事件，例如： <input v-on:keyup.page-down="onPageDown"> ；
按键别名：
.enter:回车键；
.tab:TAB键；
.delete:删除和退格键；
.esc:终止键；
.space:删除键；
方向键：.up、.down、left、.right；
还可以通过Vue全局上的config.keyCodes对象自定义按键修饰符别名：例如 Vue.config.keyCodes.f1 = 112 ；
3.系统修饰键
.ctrl、.alt、.shift、.meta;前面三个键都能对应的上，meta是“窗口键”，在window上是window图标的那个键，其它系统大家对号入座。
通过系统修饰键组合按键指令：例如：
1 <!-- Alt + C --> 2 <input @keyup.alt.67="clear"> 3 4 <!-- Ctrl + Click --> 5 <div @click.ctrl="doSomething">Do something</div>
这时候就会有新的问题产生，如果需要单独的系统按键的事件怎么办呢？Vue提供了.exact修饰符：
1 .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。 2 3 <!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> 4 <button @click.ctrl="onClick">A</button> 5 6 <!-- 有且只有 Ctrl 被按下的时候才触发 --> 7 <button @click.ctrl.exact="onCtrlClick">A</button> 8 9 <!-- 没有任何系统修饰符被按下的时候才触发 --> 10 <button @click.exact="onClick">A</button>
4.鼠标按钮修饰符2.2.0版本
.left、.right、.middle
三、为什么要在HTML中使用事件监听
我们通常在描述vue时都会说它是一个数据驱动的框架，而这种事件监听的方式违背了这个说法，但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
-
扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
-
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
-
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
四、demo
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 9 <style> 10 *{ 11 list-style:lower-alpha; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="app"> 17 <input type="text" v-model.trim="taskText" v-on:change="addTask"> 18 <button v-on:click="accomplishTaskList">提交</button> 19 <span>{{prompt}}</span> 20 <ul> 21 <li v-for="(item, key) in newTask" v-bind:key="item"> 22 <span>{{item}}</span> 23 <button v-on:click="accomplishTask(key)">X</button> 24 </li> 25 </ul> 26 <h3>已完成任务</h3> 27 <ul> 28 <li v-for="item in taskList">{{item}}</li> 29 </ul> 30 </div> 31 <script> 32 var vm = new Vue({ 33 el:"#app", 34 data:{ 35 taskText:"", 36 newTask:[], 37 taskList:[], 38 prompt:"" 39 }, 40 methods:{ 41 addTask(){ 42 43 if(this.taskText == ""){ 44 this.prompt = "输入不能为空"; 45 return; 46 }else if(this.newTask.includes(this.taskText) || this.taskList.includes(this.taskText)){ 47 this.prompt = "不能重复输入任务"; 48 }else{ 49 this.newTask.unshift(this.taskText); 50 // this.newTask.unshift(this.taskText); 51 this.taskText = ""; 52 } 53 }, 54 accomplishTask(index){ 55 const val = this.newTask.splice(index,1); 56 this.taskList.push(...val); 57 }, 58 accomplishTaskList(){ 59 const valList = this.newTask.splice(0); 60 this.taskList.push(...valList); 61 } 62 } 63 }); 64 </script> 65 </body> 66 </html>