<vue 基础知识 5、事件监听>

代码结构

 

 

一、     v-on基本使用

1、效果  

按钮点击一下数字增加1

 

 

2、代码

01-v-on基本使用.html

?
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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01-v-on基本使用</title>
    </head>
    <body>
 
        <div id="app">
            <h2>{{counter}}</h2>
            <button v-on:click="counter++">按钮1</button>
            <button v-on:click="btnClick()">按钮2</button>
            <!--简写-->
            <button @click="counter++">按钮3</button>
            <button @click="btnClick()">按钮4</button>
        </div>
 
        <script src="vue.js"></script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                methods: {
                    btnClick() {
                        this.counter++
                    }
                }
            })
        </script>
 
    </body>
</html>

 

二、     v-on参数使用

1、 效果

函数不传入参数、传入参数和event事件以及双击事件展示

 

 

2、代码

02-v-on参数问题.html

?
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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>02-v-on参数问题</title>
    </head>
    <body>
 
        <div id="app">
            <h2>点击次数: {{counter}}</h2>
            <!-- 如果方法有参数-->
            <!--调用时不传入参数,那么参数为undefined-->
            <button @click="btnClick1()">按钮1</button>
             
  
            <!--如果方法有参数,并且希望传入event-->
            <button @click="btnClick2(10, $event)">按钮2</button>
             
            <!--双击事件-->
            <button v-on:dblclick="btnClick3()">按钮3</button></br>
        </div>
 
        <script src="vue.js"></script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                methods: {
                    btnClick1(payload) {
                        this.counter++
                        console.log('按钮1被点击', payload);
                    },
                    btnClick2(num, event) {
                        this.counter++
                        console.log('按钮2被点击', num, event);
                    }
                    ,
                    btnClick3() {
                        this.counter++
                        console.log('按钮3被双击' );
                    }
                }
            })
        </script>
 
    </body>
</html>

 

三、03-v-on修饰符

1、效果

（1）带了stop修饰符将阻止向上调用触发事件

 

 

（2）prevent修饰符阻止了跳转到百度网站的默认行为，而回掉了添加的函数

 

 

 

 

（3）once修饰符只调用一次回调函数，再次点击就触发回调函数

 

 

（4）点击回车后触发回调函数

 

 

2、 代码

03-v-on修饰符.html

?
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
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>03-v-on修饰符</title>
    </head>
    <body>
 
        <div id="app">
            ----------修饰符stop 停止冒泡------------
            <div @click="divClick">
                <button @click="btnClick">不带stop修饰符按钮</button>
            </div>
 
            <div @click="divClick">
                <button @click.stop="btnClick">带stop修饰符按钮</button>
            </div>
 
            ----------修饰符prevent 组织默认行为------
            <div>
                <a href="http://www.baidu.com" @click="aClick">百度一下</a>
            </div>
            <div>
                <a href="http://www.baidu.com" @click.prevent="aClick">百度一下</a>
            </div>
  
            -----------修饰符once 只触发一次回调函数---
            <div>
                <button @click.once="btnClick">once按钮</button>
            </div>
             
            -----------点击回车时才触发回调-----------
            <div>
                <input type="text" @keyup.enter="onEnter">
            </div>
             
            <div>
                <input type="text" @keyup.13="onEnter">
            </div>
        </div>
 
        <script src="vue.js"></script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
 
                },
                methods: {
                    divClick() {
                        console.log('divClick');
                    },
                    btnClick() {
                        console.log('btnClick');
                    },
                    aClick() {
                        console.log('aClick');
                    },
                    onEnter() {
                        console.log('enter被点击');
                    }
                }
            })
        </script>
 
    </body>
</html>

 

 

 

posted @   万笑佛  阅读(64)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示