Vue事件处理：v-on 指令

pan_junbiao

于 2024-08-21 18:34:09 发布

阅读量328

点赞数 13

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

本文链接：https://blog.csdn.net/pan_junbiao/article/details/141397600

版权

我の原创同时被 2 个专栏收录

492 篇文章 26 订阅

订阅专栏

Vue

14 篇文章 0 订阅

订阅专栏

1、v-on 指令

在 Vue.js 中，事件处理是一个很重要的环节，可以使用 v-on 指令对 DOM 事件进行监听。该指令通常在模板中直接使用，在触发事件时执行相应的 JavaScript 代码。在 HTML 元素中使用 v-on 指令时，v-on 后面可以是所有的原生事件名称。

1.1 绑定事件

v-on 指令绑定事件的基本用法如下：

<button v-on:click="login">登录</button>

另外，Vue.js 提供了 v-on 指令的简写形式“@”。将上述代码修改为 v-on 指令的简写形式，代码如下：

<button @click="login">登录</button>

【实例】使用 v-on 指令绑定按钮事件，实现点击按钮，获取并显示用户信息。

<body>
    <div id="app">
        <button v-on:click="getUserInfo">获取用户信息</button>
        <div v-show="isShow">
            <p>用户ID：{{userInfo.userId}}</p>
            <p>用户名称：{{userInfo.userName}}</p>
            <p>博客信息：{{userInfo.blogName}}</p>
            <p>博客地址：{{userInfo.blogUrl}}</p>
        </div>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    // 使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                isShow: false,
                userInfo: {}
            }
        },
        //方法
        methods: {
            getUserInfo: function () {
                //获取用户信息
                this.userInfo = {
                    userId: 1,
                    userName: "pan_junbiao的博客",
                    blogName: "您好，欢迎访问 pan_junbiao的博客",
                    blogUrl: "https://blog.csdn.net/pan_junbiao"
                }

                //显示信息
                this.isShow = true;
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app'); 
</script>

执行结果：

1.2 使用 event 事件对象

与事件绑定的方法可以传入原生 DOM 事件对象，将 event 作为参数进行传递。

【实例】将原生 DOM 事件对象 event 作为参数进行传递。

<body>
    <div id="app">
        <button v-on:click="getTagName">获取元素标签名</button>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    // 使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //方法
        methods: {
            //参数：传入事件event对象
            getTagName: function (event) {
                alert("触发事件的元素标签名：" + event.target.tagName);
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app'); 
</script>

执行结果：

1.3 使用特殊变量 $event

如果在内联语句中需要获取原生 DOM 事件对象，可以向方法中传入一个特殊变量 $event。

【实例】获取原生 DOM 事件对象，向方法中传入一个特殊变量 $event。

<body>
    <div id="app">
        <a :href="blogUrl" v-on:click="show('您好，欢迎访问 pan_junbiao的博客', $event)">{{blogName}}</a>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    // 使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                blogName: "pan_junbiao的博客",
                blogUrl: "https://blog.csdn.net/pan_junbiao"
            }
        },
        //方法
        methods: {
            //参数：传入一个特殊变量 $event
            show: function (message, e) {
                e.preventDefault(); //阻止浏览器默认行为
                alert(message);
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app'); 
</script>

执行结果：

2、修饰符的使用

Vue.js 为 v-on 指令提供了多个修饰符，这些修饰符分为事件修饰符和按键修饰符。

下面对这来两种修饰符分别进行介绍。

2.1 事件修饰符

在事件处理程序中，有时会调用 preventDefault() 或 stopPropagation() 方法来实现特定的功能。preventDefault() 方法可以阻止浏览器的默认行为，stopPropagation() 方法可以阻止事件冒泡。为了处理这些 DOM 事件细节，Vue.js 为 v-on 指令提供了一些事件修饰符。

事件修饰符及其说明列表：

修饰符	说明
.stop	阻止事件冒泡，等同于调用 event.stopPropagation() 方法。
.prevent	阻止浏览器的默认行为，等同于调用event.preventDefault() 方法。
.capture	使用capture模式添加事件监听器。
.self	只有当事件是从监听器绑定的元素本身触发时才触发回调。
.once	只触发一次回调。
.passive	以{ passive: true }模式添加监听器

使用事件修饰符的示例代码如下：

<!--阻止单击事件冒泡传播-->
<a v-on:click.stop="dosomething"></a>

<!--阻止表单默认提交事件-->
<form v-on:submit.prevent="dosomething"></form>

<!--只有当事件是从当前元素本身触发时才调用处理函数-->
<div v-on:click.self="dosomething"></div>

修饰符可以串联使用：

<!--修饰符串联，阻止表单默认提交事件且阻止冒泡-->
<a v-on:click.stop.prevent="dosomething"></a>

只使用修饰符，而不绑定事件处理方法：

<!--只有修饰符，而不绑定事件-->
<form v-on:submit.prevent></form>

2.2 按键修饰符

除了事件修饰符，Vue.js 还为 v-on 指令提供了按键修饰符。按键修饰符的作用是监听键盘事件中的按键。当触发键盘事件时需要检测按键的 keyCode 值，示例代码如下：

<input v-on:keyup.13="submit">

上述代码中，应用 v-on 指令监听键盘的 keyup 事件。因为键盘中的 Enter 键的 keyCode 值是13，所以在向文本框中输入内容后，当按 Enter 键时就会调用 submit() 方法。

键盘中的按键比较多，要记住一些按键的 keyCode 值并不是一件容易的事情。为此，Vue.js 为一些常用的按键提供了别名。例如，Enter 键的别名为 enter，将上述示例代码改为使用别名的方式，代码如下：

<input v-on:keyup.enter="submit">

pan_junbiao

关注

13
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue事件处理：v-on 指令

在 Vue.js 中，事件处理是一个很重要的环节，可以使用v-on 指令对 DOM 事件进行监听。该指令通常在模板中直接使用，在触发事件时执行相应的 JavaScript 代码。在 HTML 元素中使用v-on 指令时，v-on 后面可以是所有的原生事件名称。与事件绑定的方法可以传入原生 DOM 事件对象，将 event 作为参数进行传递。
复制链接

扫一扫