Vue中的事件处理

最新推荐文章于 2023-06-12 11:39:31 发布

YonChao

最新推荐文章于 2023-06-12 11:39:31 发布

阅读量496

点赞数

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

本文链接：https://blog.csdn.net/weixin_44141172/article/details/121354806

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了Vue中如何使用v-on或@绑定事件，并在methods中定义回调函数处理事件。强调了methods中不应使用箭头函数以保持正确的this指向。示例展示了如何通过事件触发弹窗提示，以及如何传递参数和利用$event获取元素属性。对于参数的灵活传递，可以通过事件传递多个参数或使用数据对象来实现。

摘要由CSDN通过智能技术生成

`Vue`中的事件处理

知识点：

使用v-on:xxx或者@xxx绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vue实例了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或者是组件实例对象；
@click='demo'和 @click='demo($event)' 效果一致，但是后者可以传递参数，还可以通过event（点击或者别的什么事件）去拿到按钮或者别的元素的属性；

需求：写一个按钮去绑定事件实现在点击后弹窗。

<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo1">点我提示1</button>
        <button @click="showInfo2(66,$event)">点我提示2(简写)</button>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    name: "郑州大学"
                }
            },
            methods: {
                showInfo1(event) {
                    //可以拿到事件，从而拿到这个按钮的属性等等
                    console.log(event.target.innerText)
                    alert("同学你好!")
                },
                showInfo2(number, event2) {
                    //可以拿到事件，从而拿到这个按钮的属性等等
                    console.log(event2.target.innerText)
                    alert("同学你好!!" + number)
                },
            }
        })
    </script>

</body>

ps:疑惑？通过这种方式那么怎么灵活的传递参数而不是直接写死。