Vue简明实用教程(04)——事件处理

最新推荐文章于 2024-08-07 09:03:59 发布
最新推荐文章于 2024-08-07 09:03:59 发布
阅读量1.1k 收藏 5
点赞数 4
分类专栏： Vue简明实用教程 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lfdfhl/article/details/121237683
版权
本文介绍了Vue中事件处理的基本步骤，包括在methods中定义函数并应用v-on或@属性绑定，以及使用this操作实例数据。还详细讲解了事件修饰符如.once、.prevent、.stop和.self的应用示例。
摘要由CSDN通过智能技术生成

版权声明

  • 本文原创作者：谷哥的小弟
  • 作者博客地址：http://blog.csdn.net/lfdfhl

事件处理概述

在Vue中可非常便利地进行事件处理，例如：点击事件、鼠标悬停事件等。

主要步骤：

  • 1、在Vue实例的methods中定义函数。
  • 2、在html中指定事件类型及其对应的处理函数。

事件处理方式

在此，介绍两种Vue常用的事件处理方式。

方式一

函数定义

在Vue实例的methods中定义函数

函数名:function(){

}

函数调用

在html中通过v-on属性指定事件类型及其对应的处理函数

<标签名 v-on:事件类型="事件处理函数">标签体</标签名>

方式二

函数定义

在Vue实例的methods中定义函数

函数名(){

}

函数调用

在html中通过@事件类型属性指定事件类型及其对应的处理函数

<标签名 @事件类型="事件处理函数">标签体</标签名>

this

Vue实例的methods中定义的函数里可使用this表示当前Vue实例。在开发中，我们可以使用this获取data中的数据或者调用methods中的其它方法。

事件处理示例1

<!DOCTYPE html>
<!-- 引入v-on命名空间-->
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函数
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟",
                    number: 9527
                },
                // Vue实例中的方法
                methods:{
                    fun1:function (){
                        console.log("hello fun1");
                    },
                    fun2:function (){
                        console.log("hello fun2");
                    },
                    fun3:function (){
                        console.log(this);
                        // 通过this访问data中的属性
                        console.log(this.name);
                        console.log(this.number);
                    },
                    fun4:function (){
                        // 通过this访问data中的属性并修改
                        this.name = this.name+"hi ";
                        this.number = this.number+1;
                        // 通过this调用methods中的方法
                        this.fun3();
                    },
                    fun5:function (str){
                        // 通过this访问data中的属性并修改
                        this.name = this.name+str;
                    },
                    fun6:function (i){
                        // 通过this访问data中的属性并修改
                        this.number = this.number+i;
                    },
                    fun7:function (str,i){
                        // 打印方法被调用时接收到的参数
                        console.log("str="+str);
                        console.log("i="+i);
                    },
                    fun8:function (paramObject){
                        // 打印方法被调用时接收到的对象参数
                        console.log("username="+paramObject.username);
                        console.log("age="+paramObject.age);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
    <h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <h3>{{name}}</h3>
        <h3>{{number}}</h3>
        <button v-on:click="fun1">按钮绑定点击事件</button>
        <br/><br/>
        <button v-on:mouseover="fun2">按钮绑定鼠标悬停事件</button>
        <br/><br/>
        <button v-on:click="fun1" v-on:mouseover="fun2">按钮同时绑定点击事件和鼠标悬停事件</button>
        <br/><br/>
        <button v-on:click="fun3">按钮绑定点击事件与this入门</button>
        <br/><br/>
        <button v-on:click="fun4">按钮绑定点击事件与this使用</button>
        <br/><br/>
        <button v-on:click="fun5('bye')">按钮绑定点击事件与方法调用传参1</button>
        <br/><br/>
        <button v-on:click="fun6(2)">按钮绑定点击事件与方法调用传参2</button>
        <br/><br/>
        <button v-on:click="fun7('nice',99)">按钮绑定点击事件与方法调用传参3</button>
        <br/><br/>
        <!-- 以对象形式传递参数 -->
        <button v-on:click="fun8({username:'zxx',age:50})">按钮绑定点击事件与方法调用传参4</button>
        <br/><br/>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

事件处理示例2

<!DOCTYPE html>
<!-- 引入v-on命名空间-->
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函数
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟",
                    number: 9527
                },
                // Vue实例中的方法的简便写法
                methods:{
                    fun1(){
                        console.log("hello fun1");
                    },
                    fun2(str,i){
                        console.log(str);
                        console.log(i);
                        // 通过this访问data中的属性并修改
                        this.name = this.name+str;
                        this.number = this.number + i;
                    },
                    fun3(){
                        console.log("hello mouseover");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
    <h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <h3>{{name}}</h3>
        <h3>{{number}}</h3>
        <button @click="fun1">利用@click实现按钮绑定点击事件的简便写法1</button>
        <br/><br/>
        <button @click="fun2('nice',7)">利用@click实现按钮绑定点击事件的简便写法2</button>
        <br/><br/>
        <button @mouseover="fun3()">利用@mouseover实现鼠标悬停事件的简便写法</button>
        <br/><br/>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

事件修饰符

事件修饰符常用于对事件进行描述和修饰，它可决定事件触发条件或阻止事件的触发。

在此，介绍Vue中常用的事件修饰符。

.once

.once修饰符表示该事件只触发一次。

.prevent

.prevent修饰符用于阻止标签的默认行为。

.stop

.stop修饰符用于阻止冒泡事件向上传递。

.self

.self修饰表示只监听自身标签触发的事件，忽略冒泡事件。

事件修饰符语法

@事件名.事件修饰符

例如：

@click.self

事件修饰符示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函数
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟",
                    number: 9527
                },
                methods:{
                    fun1(){
                        console.log("hello fun1");
                    },
                    fun2(){
                        console.log("hello fun2");
                    },
                    fun3(){
                        console.log("hello parent");
                    },
                    fun4(){
                        console.log("hello fun4");
                    },
                    fun5(){
                        console.log("hello parent");
                    },
                    fun6(){
                        console.log("hello fun6");
                    },
                    fun7(){
                        console.log("hello fun7");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
    <h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <h3>{{name}}</h3>

        <button @click.once="fun1">利用@click实现按钮绑定点击事件并测试once修饰符</button>
        <br/><br/>

        <a href="http://blog.csdn.net/lfdfhl" @click.prevent="fun2">利用@click实现超链接点击并测试prevent修饰符</a>
        <br/><br/>

        <p>事件传递及冒泡回顾</p>
        <div style="width: 200px;height: 200px;background: red" @click="fun3">
            <div style="width: 100px;height: 100px;background: green" @click="fun4"></div>
        </div>
        <br/><br/>

        <p>利用@click实现div绑定点击事件并测试stop修饰符</p>
        <div style="width: 200px;height: 200px;background: red" @click="fun3">
            <div style="width: 100px;height: 100px;background: green" @click.stop="fun4"></div>
        </div>
        <br/><br/>

        <p>利用@click实现div绑定点击事件并测试self修饰符</p>
        <div style="width: 200px;height: 200px;background: red" @click.self="fun5">
            <input type="button" value="Button1"  @click.stop="fun6"/>
            <br/><br/>
            <input type="button" value="Button2" @click="fun7"/>
        </div>

    </div>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

按键修饰符

按键修饰符常用于对键盘按键事件进行修饰。

在此，介绍Vue中常用的按键修饰符。

.enter

.enter用于对键盘回车键修饰

.tab

.tab用于对键盘tab按键修饰

.esc

.esc用于对esc按键修饰

.space

.space用于对空格键修饰

.up

.up用于对上键修饰

.down

down用于对下键修饰

.left

.left用于对左键修饰

.right

.right用于对右键修饰

按键修饰符语法

@按键类型.按键修饰符

例如：

@keyup.enter

按键修饰符示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函数
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟",
                    number: 9527,
                    content:""
                },
                methods:{
                    getContent1(){
                        let input1 = document.getElementById("input1");
                        let content = input1.value;
                        console.log("文本框中输入的内容为："+content);
                    },
                    getContent2(){
                        console.log("文本框中输入的内容为："+this.content);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
    <h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <h3>{{name}}</h3>
        <p>利用@keyup当按下回车键时获取输入框中的内容(方法1)</p>
        <input id="input1" type="text" @keyup.enter="getContent1" />
        <p>利用@keyup当按下回车键时获取输入框中的内容(方法2)</p>
        <input id="input2" type="text" v-model="content" @keyup.enter="getContent2" />
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

谷哥的小弟
关注
专栏目录
【ChatGPT】实用 Prompt 指令大全 —— 一文教你如何更好地挖掘 GPT 的价值
程序员光剑
04-15 2万+
ChatGPT 是由 OpenAI 开发的一种先进的大型语言生成模型，能够理解和生成准确、自然且连贯的文本。文本生成数据分析内容审核语义理解自然语言推理以及其他众多任务ChatGPT是一种基于GPT-3.5架构的大型语言模型，由OpenAI公司开发。该模型在自然语言处理领域有着广泛的应用，可以用于文本生成、文本分类、情感分析、问答系统等任务。本文将从模型的架构、训练方式、优缺点等方面对ChatGPT进行详细介绍。一、模型架构。
vue2实践揭秘pdf_Vue2实践揭秘
weixin_39607873的博客
12-20 717
本书以Vue2的实践应用为根基，从实际示例入手，详细讲解Vue2的基础理论应用及高级组件开发，通过简明易懂的实例代码，生动地让读者快速、全方位地掌握Vue2的各种入门技巧以及一些在实际项目中的宝贵经验。本书除了全面、细致地讲述Vue2的生态结构、实际编程技巧和一些从实践中得到的经验，还重点介绍如何以组件化编程思想为指导，以前端工程化方法为实现手段来实践Vue2，通过组件的单元测试和E2E测试来保证...
Vue的事件处理
阳光下的冷静的博客
03-17 436
Vue的事件处理 vue的事件处理主要分为三类： 事件的绑定监听 v-on:xxx=“fun” @xxx=“fun” @xxx=“fun(参数)” 默认事件形参: event 隐含属性对象: $event 事件修饰符 prevent : 阻止事件的默认行为 event.preventDefault() stop : 停止事件冒泡 event.stopPropagation() 按键修...
Vue事件处理
weixin_33841503的博客
11-01 89
监听事件 可以使用v-on指令监听DOM事件，并在触发的时候运行一些JavaScript代码。 <button v-on:click="counter+1"></button> 事件处理方法 因为事件处理逻辑会更为复杂，所以直接把JavaScript代码写在v-on指令中是不可行的，因此v-on还可以接受一个需要调...
Vue的事件处理、事件修饰符、键盘事件
最新发布
Bulut0907
08-07 1037
但不推荐使用keyCode，因为不同浏览器的一个按键keyCode不一样，以后keyCode这种方式会被废弃。Vue未提供别名的按键，可以使用按键原始的key值去绑定，但多个单词的注意要转为短横线命名。如Enter，caps-lock。@keydown当键盘按下触发函数，@keyup当键盘按下再抬起触发函数。并不是所有的按钮都能捕获到。系统修饰键（用法特殊）：ctrl、alt、shift、meta(windows图标)注意: 多个事件修饰符可以连写，如。
vue中事件的基本使用
weixin_58384302的博客
10-17 396
1.事件的绑定 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名； 2.事件的回调需要配置在methods对象中，最终会在vm上； 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了； 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象； 5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参； 事件传参可以传自定义值,只传自定义值时,将拿不到e...
vue事件处理
merlinna的博客
09-20 128
vue事件处理 事件添加的形式 原生事件的添加形式有以下： dom.on+eventType = 事件处理程序 事件监听 js定义函数，HTML结构中调用函数 ​ Vue事件添加形式 js定义函数，HTML结构中调用函数。 因为Vue是通过指令操作DOM 原生： <body onload = "load()"> <div id="...
vue调用接口获取后台数据_vue中如何获取后台数据
热门推荐
weixin_39684235的博客
12-19 1万+
需要引用vue-resource在入口函数中加入import VueResource from 'vue-resource'Vue.use(VueResource);在package.json文件中加入"dependencies": {"vue": "^2.2.6","vue-resource":"^1.2.1"},请求如下mounted: function () {// GET /someUrl...
arch-guide::sparkles: archlinux 简明指南 | 本指南包含从 archlinux 安装、显卡驱动、日常软件配置、多媒体制作、编程等你可能需要的全部内容 | 提供在线文档 :sparkles:
07-23
:open_book: 格式优化 —— 由 VuePress 驱动，相对原教程格式进行优化 :carp_streamer: 详细介绍 —— 对安装的细节和原理进行了更为详细的说明，知其然知其所以然 :desert_island: 图文丰富 —— 增加了更多可视化...
山东大学项目实训（二十七）—— 微信小程序开发总结，一年时间真的可以改变一个人很多
bhegi_seg的博客
06-22 1万+
到目前为止，微信小程序开发，到此就算是结束了，其中实现了不少功能，如下：1.1 角色与权限（后端同学实现的，写这个方便介绍后面的功能） 平台可以配置不同的用户角色并授予其不同的操作权限。每个用户在使用平台时都需要指定一个角色。1.2 可视范围——根据角色绑定的权限菜单 全体职工可以查看自己上报的事件（待审核、已通过、被驳回）。 质控人员可以查看所有的事件（待审核、待评价、已通过、已驳回、已评价）。 职能人员可以查看自己/自己部门负责的事件（待整改、待评价、已评价）。 各科室医务人员可以查看本科室相关的事件（
vue 事件处理
.
09-14 175
文章目录vue 事件处理click 事件事件修饰符 vue 事件处理 click 事件 v-on可以简写为@，比如v-on:click=“count += 1"可以简写为 @click。 我们可以通过v-on直接绑定javaScript代码到DOM的click事件，v-on:click表示监听DOM的click事件，等同于：οnclick=”…"。 但是需要注意，如果我们使用原生的onclick，...
Vue 事件处理
Tester_muller的博客
09-27 969
内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。在事件中改变文本是否显示的属性值，methods编写对应方法，索引到data属性内定义的值。方法事件处理器：一个指向组件上定义的方法的属性名或是路径。注意：所有data里面的属性都是通过this来索引修改。即想传递参数又想传递envent对象。再次点击一次，按钮上文本消失。按钮点击，文本交替显示或消失。对应文本传入事件进行处理。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

谷哥的小弟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值