VUE事件监听及实例（简单计数器）

最新推荐文章于 2023-12-31 19:25:26 发布

莫余

最新推荐文章于 2023-12-31 19:25:26 发布

阅读量265

点赞数

分类专栏：凌晨3:40的Vue 文章标签： vue javascript js event

本文链接：https://blog.csdn.net/qq_44824148/article/details/112584409

版权

凌晨3:40的Vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

前端开发中，需要经常和用于交互，比如点击、拖拽、键盘事件等等。
Vue中如何监听事件呢？使用v-on指令

v-on介绍

作用：绑定事件监听器

缩写：@

预期：Function | Inline Statement | Object

参数：event

v-on的使用

v-on:click="counter++”
可以将事件指向一个在methods中定义的函数

在这里插入图片描述

v-on也有对应的语法糖： v-on:click可以写成@click
在这里插入图片描述

v-on参数

当通过methods中定义方法，以供@click调用时，需要注意参数问题：
情况一：
如果该方法不需要额外参数，那么方法后的==()可以不添加==。
但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：
如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

v-on修饰符

Vue提供了修饰符来帮助我们方便的处理一些事件：

.stop - 调用 event.stopPropagation()。
.prevent - 调用event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>
            当前计数：{{counter}}
        </h2>
        <button v-on:click="add">+</button>
        <button @click="sub">-</button>
    </div>
    <script>
        let app=new Vue({
            el:'#app',
            data:{
                counter:0
            },
            methods:{
                add(){
                    console.log("add()被执行");
                    this.counter++;
                },
                sub(){
                    console.log("sub()被执行");
                    this.counter--;
                }
            }
        })
    </script>
</body>
</html>