九、事件监听（二 v-on 修饰符）

 <!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会出发一次 -->
<button @click.once="doThis"></button>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../Js/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
          <!-- 1  .stop修饰符的使用( 相当于之前的event.stopPropagation() )   停止冒泡-->
          <div @click="divClick()">
            aaaaa
            <button @click.stop="btnClick()">按钮</button>
          </div>
 
          <!-- 2  .prevent修饰符的使用( 相当于之前的event.preventDefault() )  阻止默认事件、行为-->
          <form action="baidu">
            <input type="submit" value="提交" @click.prevent="submitClick()">
            <br>
          </form>
 
          <!-- 3   .{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调 -->
          <!-- 监听某个键盘的键帽 -->
          <input type="text" v-on:keyup="keyup()"><br/>
          <!-- 监听某个键盘的enter -->
          <input type="text" v-on:keyup.enter="keyupEnter()"><br/>
 
          <!-- 4   .once 只触发一次 -->
          <button @click.once="btn2Click()">只被点击一次</button>
        </div>
        <script>
          const app = new Vue({
            el:"#app",
            data:{
              message:"你好啊"
            },
            methods: {
              divClick(){
                console.log("divClick");
              },
              btnClick(){
                console.log("btnClick")
              },
              submitClick(){
                console.log("submitClick")
              },
              keyup(){
                console.log("keyup")
              },
              keyupEnter(){
                console.log("keyupEnter")
              },
              btn2Click(){
                console.log("btn2Click")
              }
            }
          });
        </script>
    </body>
</html>

　　

posted @   搬砖工具人  阅读(45)  评论(0)  编辑  收藏  举报
相关博文：
·  八、事件监听（一）
·  十、数组中的响应式方法
·  VUE学习-监听事件
·  简单动作事件监听
·  vue的事件监听
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手