三，vue的基础语法之事件监听

最新推荐文章于 2023-11-30 16:37:04 发布

银角大王qaq

最新推荐文章于 2023-11-30 16:37:04 发布

阅读量267

点赞数

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

本文链接：https://blog.csdn.net/weixin_44731169/article/details/107376540

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在前端开发中，我们需要经常和用户交互，在这个时候我们就必须监听用户发生的时间，比如点击，拖曳，键盘事件等。

在vue中监听事件，我们使用v-on指令

1.v-on的基本使用

我们用一个监听按钮的点击事件，来了解v-on的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>计数：{{message}}</h2>
    <p>实现计数：{{message}}</p>
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
    <!--<button v-on:click="add">+</button>-->
    <!--<button v-on:click="sub">-</button>-->
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            // el: "#app",
            // data: {
            //     message: 0
            // },
        //      methods: {
        //         add:function () {
        //             this.message++
        //         },
        //         sub:function () {
        //             this.message--
        //         }
        // }
        el: "#app",
        data: {
            message: 0
        },
        methods: {
            add: function () {
                this.message++
            },
            sub: function () {
                this.message--
            }
        }
        })
</script>

</body>
</html>

2.v-on的参数问题

– 如果该方法不需要额外参数，那么方法后的()可以不添加

如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="btnClick1">按钮1</button>
    <button @click="btnClick2(456)">按钮2</button>
    <button @click="btnClick2(abc)">按钮3</button>
    <button @click="btnClick3(abc,$event)">按钮4</button>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue",
                abc: 123
            },
        methods:{
                btnClick1(event){
                    console.log("btnClick1+"+event)
                },
                btnClick2(event){
                    console.log("btnClick2---------"+event)
                },
            btnClick3(abc,event){
                console.log("btnClick2---------"+event+abc)
            }
        }
        })
</script>

</body>
</html>

3.v-on修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件处理
Vue提供了修饰符来帮助我们方便的处理一些事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--1. .stop修饰符的使用-->
    <div @click="divClick">
        aaaaaaa
        <button @click.stop="btnClick">按钮</button>
    </div>

    <!--2. .prevent修饰符的使用-->
    <br>
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick">
    </form>

    <!--3. .监听某个键盘的键帽-->
    <input type="text" @keyup.enter="keyUp">

    <!--4. .once修饰符的使用-->
    <button @click.once="btn2Click">按钮2</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        methods: {
            btnClick() {
                console.log("btnClick");
            },
            divClick() {
                console.log("divClick");
            },
            submitClick() {
                console.log('submitClick');
            },
            keyUp() {
                console.log('keyUp');
            },
            btn2Click() {
                console.log('btn2Click');
            }
        }
    })
</script>

</body>
</html>