[Vue] 11.Vue的事件绑定（1）

最新推荐文章于 2024-05-30 11:27:58 发布

weiweicn!

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量60

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u014627255/article/details/125122625

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

初始代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    counter: 0
                }
            },
            methods: {
                handleBtnClick() {

                }
            },
            template: `
                <div>
                    {{counter}}
                    <button @click="handleBtnClick">button</button>
                </div>
                `,
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>

在这里插入图片描述
2. 若要绑定多个事件，处理如下：会依次执行两个事件

<script>
        const app = Vue.createApp({
            data() {
                return {
                    counter: 0
                }
            },
            methods: {
                handleBtnClick() {
                    alert(1)
                },
                handleBtnClick1() {
                    alert(2)
                }
            },
            template: `
                <div>
                    {{counter}}
                    <button @click="handleBtnClick(), handleBtnClick1()">button</button>
                </div>
                `,
        });
        const vm = app.mount('#root')
    </script>

stop修饰符：停止事件像上层冒泡，例如下方代码正常情况下点击按钮会弹出alert，在用.stop修饰符之后，就不会弹出alert

<script>
        const app = Vue.createApp({
            data() {
                return {
                    counter: 0
                }
            },
            methods: {
                handleBtnClick() {
                    this.counter += 1;
                },
                handleDivClick() {
                    alert('div clicked')
                }
            },
            template: `
                <div>
                    {{counter}}
                    <div @click="handleDivClick">
                        <button @click.stop="handleBtnClick()">button</button>
                    </div>
                </div>
                `,
        });
        const vm = app.mount('#root')
    </script>

类似事件修饰符
1） prevent:组织默认行为
2）capture：捕获，与冒泡相反，从外到内
3）self：必须在自身dom上触发
4）once：事件执行一次

weiweicn!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Vue] 11.Vue的事件绑定（1）

初始代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti.
复制链接

扫一扫