【Vue】-04-v-on事件监听

虚拟内存会梦见进程调度嘛？

已于 2023-01-08 11:12:09 修改

阅读量248

点赞数

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

于 2023-01-03 17:38:20 首次发布

本文链接：https://blog.csdn.net/weixin_41649821/article/details/128535910

版权

Vue学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue.js的v-on指令来监听和处理DOM事件，包括方法事件处理器和内联事件处理器的使用方式。示例代码展示了如何通过v-on绑定点击事件，调用组件方法或直接执行JavaScript语句来改变或响应数据。

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

前言

可以用v-on指令监听DOM事件，并在触发时运行一些js代码。

监听事件

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。
用法：v-on:click="methodName" 或@click="handler"。

事件处理器的值可以是：
方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

二、方法事件处理器

在BUTTON按钮中使用方法事件处理器弹窗显示。

代码

        <div id="app">
            <!-- 方法事件处理器 -->
            <button v-on:click="sayHi">Button</button>
        </div>

        <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message:"Hello,v-on!"
            },
            methods:{
                // 方法必须定义在Vue的methods对象中。
                sayHi: function(event){
                    alert(this.message); 
                }
            }
        });
    </script>

效果图

在这里插入图片描述

三、内联事件处理器

在BUTTON1按钮中使用内联事件处理器更改message的值。

代码

        <div id="app">
            <!-- 内联事件处理器 -->
            <button v-on:click="message='hello，vue!'">Button1</button>
            <!-- 方法事件处理器 -->
            <button v-on:click="sayHi">Button2</button>
        </div>

        <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message:"Hello,v-on!"
            },
            methods:{
                // 方法必须定义在Vue的methods对象中。
                sayHi: function(event){
                    alert(this.message); 
                }
            }
        });
    </script>