基本应用
为什么要在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 >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 >
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>
还没有评论，来说两句吧...