vue入门：（事件处理）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

  • 基本应用

  • 修饰符

  • 为什么要在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 有几个好处：

  1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

  2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

  3. 当一个 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>

以上是 vue入门：（事件处理） 的全部内容， 来源链接： utcz.com/z/380101.html

回到顶部