【Vue】事件处理

最新推荐文章于 2024-08-15 12:28:07 发布

Vae12138

最新推荐文章于 2024-08-15 12:28:07 发布

阅读量85

点赞数

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

本文链接：https://blog.csdn.net/Vae12138/article/details/126111871

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue中事件的基本使用，包括使用v-on或@语法绑定事件，事件回调函数配置在methods对象中，强调methods中函数的this指向及如何传递参数。示例代码展示了如何在模板中触发showInfo1和showInfo2方法，分别展示不传参数和传参的事件处理。

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

事件的基本使用：
1.使用v-on：xxx 或 @xxx 绑定事件，其中xxx是事件名
2.事件的回调需要配置在methods对象中，最终会在vm上
3.methods中配置的函数，不需要箭头函数！否则this就不是vm了
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
5.@click = “demo” 和@click = “demo($event)” 效果一致，但后者可以传递参数

<body>
    <div id="root">
        <h1>欢迎来到 {{name}}</h1>
        <button @click="showInfo1">点击1(不传参数)</button>
        <button @click="showInfo2($event,66)">点击2(传参数)</button>
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data: {
                name: '英雄联盟'
            },
            methods: {
                showInfo1(event) {
                    alert('压缩->' + event)
                },
                showInfo2(event, number) {
                    alert('压缩->' + number + event)
                }
            }
        })
    </script>
</body>

效果图

按钮1

在这里插入图片描述
按钮2

Vae12138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】事件处理

Vue事件的基本使用1.使用v-onxxx或@xxx绑定事件，其中xxx是事件名2.事件的回调需要配置在methods对象中，最终会在vm上3.methods中配置的函数，不需要箭头函数！否则this就不是vm了4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象；5.@click=“demo”和@click=“demo($event)”效果一致，但后者可以传递参数...
复制链接

扫一扫

专栏目录