遇见 vue.js --------阿文的vue.js学习笔记（9）------事件处理

**
新学习新征程，我们一起踏上学习 vue.js的新长征

… … …

关注我，我们一起学习进步。

既然说到事件处理，那肯定要回想起我们前面所学过的 v-on 绑定事件监听 (用来监听 DOM 事件，并在触发时，运行一些 js 代码)

1、事件处理方法

补充： 我们的v-on 可以简写成 @ ，这两者产生的效果是一样的

这里我们简单举个例子：有一个按钮，当点击的时候弹出一个“我被点击了”

当然有些时候，你会遇到它是直接将 js 代码写在 v-on 指令中的，但是当我们想要执行的 js 代码变多变复杂，这样写就是不可取的，所以我们一般都使用方法调用的形式，在下面的数据中创建一个方法，然后在上面的 v-on 指令中直接调用方法即可。

当我们需要在方法中传入参数的时候，就可以使用 内联处理器方法

简单示例：同样是弹出，只不过这次弹出的内容不再是死的，而是根据 v-on 后面调用方法时传入的参数来弹出。当我们有时需要在内联语句处理器中访问原始的 DOM 事件的时候，就可以使用特殊变量 $event 来把它传入方法

简单示例：这里event.type 是来查看该事件的属性

其实这两种方式类似，只不过一种能传参，一种不能传参而已

2、事件修饰符

事件修饰符能够简单的处理一些DOM事件上的细节

我们的事件修饰符是直接写在绑定的指令后面 .事件修饰符

1、.stop 阻止冒泡

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
        <style>
            #b1{<!-- -->
                background-color: greenyellow;
                height: 300px;
                width: 300px;
            }
            #b2{<!-- -->
                background-color: red;
                height: 150px;
                width: 150px;
            }
        </style>
    </head>
    <body>
        <div id="a">          
            <div id="b1" v-on:click="fn2">
                <div id="b2" v-on:click="fn1"></div>
            </div>            
        </div>        
        <script>
            new Vue({<!-- -->
                el:"#a",
                data:{<!-- -->

                },
                methods:{<!-- -->
                    fn1:function(){<!-- -->
                        alert("内部被点击")
                    },
                    fn2:function(){<!-- -->
                        alert("外部被点击")
                    }
                }
            })
        </script>
    </body>
</html>

执行结果： 我们点击内部的时候，除了内部函数被执行外，外部的函数也被调用了，这就是发生了冒泡事件。

我们可以阻止冒泡通过添加 .stop

2、.prevent 阻止默认行为

简单示例：但是像下面这样添加之后，就会将其阻止，不会再直接刷新了。
<form v-on:submit.prevent="onSubmit"></form>

当然除了上面常见的两种外，下面还补充几个：

.self 只作用在自己身上 once 只执行一次

2、按键修饰符

当我们在监听键盘事件的时候，我们经常会需要去检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

举个例子： 我们创建一个输入框，然后当我们输入内容按下enter 之后会将输入的数据传入输入框前面的信息当中，并且每次传入都会重置上一次输入的数据

按照我们以前的写法的话就需要用if 来做判断

代码如下：这种时候我们也可以省略掉下面的 if 判断语句，直接在上面写作：<input v-on:keyup.13="mm1">
执行出来的结果也是完全一样的。

当然我们的 Vue 也提供了一些常用的按键码的别名： .tab TAB键 .esc 退出键 .up 上 .left 左
.right 右

3、系统修饰键

我们可以用如下的系统修饰符来实现仅在按下相应的系统修饰键时，再按其他的才会触发鼠标或键盘事件的监听器。

系统修饰键一共有四个：

.ctrl
.alt
.shift
.meta

简单举个例子：就在我们上面那个例子的基础上进行修改
<input v-on:keyup.alt.enter="mm2">

这样写之后，就意味着，我们需要在按下alt 的基础下再按下 enter 键并释放 enter 键之后，我们的 mm2 事件才会被触发。

posted @ 2020-12-30 10:58 刘桓湚阅读(80) 评论(0) 收藏举报

刷新页面返回顶部

刘桓湚

遇见 vue.js --------阿文的vue.js学习笔记（9）------事件处理

遇见 vue.js --------阿文的vue.js学习笔记（9）------事件处理

1、事件处理方法

2、事件修饰符

1、.stop 阻止冒泡

2、.prevent 阻止默认行为

2、按键修饰符

3、系统修饰键

公告