7、事件监听

最新推荐文章于 2022-09-01 14:33:19 发布

北极星小王子

最新推荐文章于 2022-09-01 14:33:19 发布

阅读量144

点赞数

分类专栏： # Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_41835916/article/details/109563116

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

事件监听

一、v-on基本使用
二、v-on传递参数
三、v-on修饰符

v-on 指令用来监听事件

一、v-on基本使用

栗子🌰：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2>{{count}}</h2>
        <!-- <button v-on:click="increment">+</button>-->
        <!-- <button v-on:click="decrement">-</button>-->
        
        <!-- 语法糖写法 -->
        <button @click="increment">+</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                count: 0
            },
            methods: {
                increment() {
                    this.count++
                },
                decrement() {
                    this.count--
                }
            }
        })
    </script>
</body>
</html>

二、v-on传递参数

当通过 methods 中定义方法，以供 @click 调用时，需要注意参数问题：

如果该方法不需要额外参数，那么方法后的 () 可以不添加
如果方法本身有一个参数，但是在调用时省略了小括号，那么会默认将与原生事件 event 作为参数传递进去
如果需要 event 同时需要其他参数，可以通过 $event 传入

栗子🌰：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button @click="btnClick(123)">按钮</button>
        <button @click="btnClick2(abc, $event)">按钮2</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                count: 0,
                abc: 1
            },
            methods: {
                btnClick(abc) {
                    console.log('---', abc)
                },
                btnClick2(abc, event) {
                    console.log('---', abc, event)
                }
            }
        })
    </script>
</body>
</html>

三、v-on修饰符

栗子🌰：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!-- 1. stop 停止冒泡 点击按钮时，只有 btnClick 被触发 -->
        <div @click="divClick">
            <button @click.stop="btnClick">按钮</button>
        </div>
        <!-- 2. prevent 修饰符阻止默认事件 -->
        <form action="baidu">
            <input type="submit" value="提交" @click.prevent="submitClick">
        </form>
        <!-- 3. 监听某个按键的点击 -->
        <input type="text" @keyup.enter="keyUp">
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message:'你好哇'
            },
            methods {
                btnClick() {
                    console.log('btnClick');
                },
                divClick() {
                    console.log('dviClick');
                },
                submitClick() {
                    console.log('submitClick');
                },
                keyUp() {
                    console.log('submitClick');
                }
            }
        })
    </script>
</body>
</html>

北极星小王子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
7、事件监听

事件监听一、v-on基本使用二、v-on传递参数三、v-on修饰符v-on 指令用来监听事件一、v-on基本使用栗子????：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> &
复制链接

扫一扫