四、Vue事件

最新推荐文章于 2022-09-19 17:32:50 发布
最新推荐文章于 2022-09-19 17:32:50 发布
阅读量191 收藏
点赞数
分类专栏： Vue 前端 文章标签： vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lvruoyu/article/details/124306843
版权

03. Vue事件

事件监听

​ v-on绑定事件：在Vue中可以使用内置指令v-on监听DOM事件，并在触发时运行一些JavaScript代码，或绑定事件处理方法。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="count = Math.random()">随机获取一个数字</button>
        <p>count : {{count}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                count: 0
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="calcount()">随机获取一个数字</button>
        <p>count : {{count}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                count: 0
            },
            methods: {
                calcount(){
                    this.count = Math.random();
                }
            }
        })
    </script>
</body>
</html>

按键修饰符监听按键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-on:keyup.enter="submit()" />
        <input type="text" v-on:keydown.enter="submit()" />
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                submit(){
                    console.log("按了一下enter健")
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

事件修饰符

修饰符说明
.stop阻止事件冒泡
.prevent阻止默认事件行为
.capture事件捕获
.self将事件绑定到自身，只有自身才能触发
.once事件只触发一次

.stop

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div @click="A()" style="background-color: aqua;width: 100%; height: 300px;">
            <div @click="B()" style="background-color: coral; width: 100px; height: 300px;"></div>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                A(){
                    console.log("外层div被点击了！！！")
                },
                B(){
                    console.log("内层div被点击了！！！")
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./js/vue.js"></script>
</head>

<body>
   <div id="app">
       <div @click="A()" style="background-color: aqua;width: 100%; height: 300px;">
           <div @click.stop="B()" style="background-color: coral; width: 100px; height: 300px;"></div>
       </div>
   </div>
   <script>

       let vm = new Vue({
           el: "#app",
           data: {

           },
           methods: {
               A(){
                   console.log("外层div被点击了！！！")
               },
               B(){
                   console.log("内层div被点击了！！！")
               }
           }
       })
   </script>
</body>
</html>

在这里插入图片描述

.prevent

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>

   <script src="./js/vue.js"></script>
</head>
<body>

   <div id="app">
       <a href="https://blog.csdn.net/Lvruoyu/article/details/124256279?spm=1001.2014.3001.5501">
           Vue.js教程 </a>
       <br>
       <a href="https://blog.csdn.net/Lvruoyu/article/details/124256279?spm=1001.2014.3001.5501" @click.prevent>
           Vue.js教程 </a>
   </div>
   <script>
       let vm = new Vue({
           el: "#app",
           data: {
           }
       })

   </script>
</body>
</html>

在这里插入图片描述

.capture

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>

   <script src="./js/vue.js"></script>
</head>
<body>
   <div id="app">
       <div @click="doParent()" style="width: 100%;height: 300px; background-color: cadetblue;">
           <button @click="doChildren()">事件捕获</button>
       </div>
   </div>
   <script>

       let vm = new Vue({
           el: "#app",
           data: {

           },
           methods: {
               doParent(){
                   console.log("我是父元素元素")
               },
               doChildren(){
                   console.log("我是子元素元素")
               }
           }
       })
   </script>
</body>
</html>

在这里插入图片描述

.self

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>

   <script src="./js/vue.js"></script>


   <style>
       .div1{
           background-color: cadetblue;
           width: 100px;
           height: 100px;
           margin: 5px;
       }
       .div2{
           background-color: rgb(235, 243, 243);
           width: 80px;
           height: 80px;
       }
   </style>
</head>

<body>

   <div id="app">
       <div class="div1" @click.self="doParent()">A
           <div class="div2" @click="doChildren()">B</div>
       </div>
       <br>
       <div class="div1" @click="doParent()">C
           <div class="div2" @click.self="doChildren()">D</div>
       </div>
   </div>
   <script>
       let vm = new Vue({
           el: "#app",
           methods: {
               doParent(){
                   console.log("我是父元素元素")
               },
               doChildren(){
                   console.log("我是子元素元素")
               }
           }
       })
   </script>
</body>
</html>

在这里插入图片描述

.once

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./js/vue.js"></script>
</head>

<body>
   <div id="app">
       <button @click.once="doParent()">点击</button>
   </div>
   <script>

       let vm = new Vue({
           el: "#app",
           methods: {
               doParent(){
                   console.log("我是父元素元素")
               }
           }
       })
   </script>
</body>
</html>

在这里插入图片描述

铲屎官白茶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue中的事件处理
sdrfsef的博客
05-11 1161
目录 1.v-on事件监听 1.1简单事件处理 1.2复杂事件处理 2.事件修饰符 1.v-on事件监听 1.1简单事件处理 括号里,可以写一些简单的事件处理,如果事件比较复杂,则需要配置methods对象,把方法写在methods里边 语法 : v-on:事件名="事件处理 " 比如 v-on:click=" " 简写 : @事件名=" 事件处理" 比如 @click=" " <body> <div id="app"> ...
Vue组件之自定义事件的功能图解
08-28
Vue组件之自定义事件的功能图解 Vue组件自定义事件是指在Vue应用程序中，组件之间可以通过自定义事件来实现通信和交互的功能。在本文中，我们将通过图文并茂的形式来介绍Vue组件之自定义事件的功能和使用方法。 一...
vue事件
JustryDeng
01-12 3089
声明： 本文主要是照着官网教学自己敲了一遍，纯属动手练习，没什么技术含量。 事件： 事件监听(事件绑定)：使用v-on:监听事件，v-on:可简写为@。 示例： html中的代码： script中的代码： 效果演示： 事件的处理：简单逻辑可以直接写在指令中，复杂一点的逻辑需要写在方法里。 示例： html中的代码： script中的代码： 效果演示： 事件触发方法时的参数传递...
vue常用指令及事件
记录点滴
07-07 1098
v-text ：更新文本内容 _____________________________________________________________________________________________________ <div id="ele"> <p v-text="mes"></p> </div> <scri...
vue鼠标事件归纳
qq_46100747的博客
09-19 1726
【代码】vue鼠标事件归纳。
vue的事件绑定与方法详解
12-09
以下是关于Vue事件绑定与方法的详细解释： 一、事件绑定 Vue 使用 `v-on` 指令来绑定事件监听器。例如，若要绑定一个点击事件，可以这样做： ```html 点我" v-on:click="say();"/> ``` 在这个例子中，`v-on:click` ...
详解vue中v-on事件监听指令的基本用法
11-20
Vue.js 是一款流行的前端JavaScript框架，它提供了许多方便的功能，其中`v-on`指令就是用于事件监听的关键特性。本文将详细解析Vue中`v-on`事件监听指令的基本用法。 一、事件监听的重要性 在Web应用开发中，事件...
Vue监听事件实现计数点击依次增加的方法
10-17
在Vue.js中，事件监听是实现组件交互的关键技术。本文将详细介绍如何利用Vue监听事件来实现计数点击功能，使得每次点击按钮时，计数值依次递增。这种方法可以帮助开发者更好地理解Vue中的事件处理机制。 首先，我们...
Vue(二)——事件
黎小小的博客
01-20 856
事件 在 vue 中，事件通过指令 v-on 进行绑定，v-on 缩写 @ <组件 v-on:事件名称="表达式" /> <组件 @事件名称="表达式" /> 一、组件的methods选项 在组件选项中，提供了一个 methods 选项，用来存放组件中使用的函数方法，且存放在 methods 中的函数方法可以通过组件实例（this）进行访问 ，函数方法中也可以通过this访问data中的数据。 二、通过内联方式绑定事件处理函数 <组件 @事件名称="fn" /&
vue 事件
wanmeizty的专栏
08-18 577
1.事件修饰符 v-on : click = @click .stop 阻止事件继续往下传播（应用于一个局部响应点击事件） .prevent 用于阻止默认事件，点击 a 标签 href 可以打开相应的链接，那么给事件加 上此关键字 .capture 冒泡顺序，先冒泡有修饰符的由外层往里，再由无修饰的由里到顺序进行 .self 只有点击自己才会响应事件，不会由子事件传递过来 .once 点击事件只会执行一次 .passive 拦截默认事件 .passive 不拦截
Vue:Vue事件整理
qjyws的博客
06-19 9496
Vue事件内容整理
vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为
热门推荐
涂涂
01-18 15万+
其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown....... 以下click为例 注意：所有的v-on都可以简写为@，比如说v-click可以简写为@click 1.监听事件 可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。通常来讲就是
Vue事件（$event）
qq_36582776的博客
11-02 6831
1.Vue事件处理 <div id='div1'> <button v-on:click="showInfo1">提示信息1</button> <button @click="showInfo2($event,666)">提示信息2</button> //@是v-on:的简写形式 <div> <script> const vm=new Vue({ el:'#div1',
vue中的事件
哆来咪er的博客
11-30 5637
vue事件的简写：我们有时会看到这样的写法：@dragstart=’drag()’，这是vue中事件的简写。它的完整写法是：v-on:dragstart=’drag()’，但这往往给人感觉太长了，习惯用简写形式。vue的事件对象：vue中也会有事件对象 ， 这样@dragstart=’drag(event)′，在函数中传event)'，在函数中传evevt ，函数中接收一下，事件对象就有了。
vue事件修饰符详解
KnifeBlade的博客
06-22 2万+
        vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，常用的事件修饰符有以下几个：（１）. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）                        点击内层div的结果：                                            点击外层div的结果：            ...
vue 事件修饰符
wxy270的博客
02-28 3987
.stop.prevent.capture.self.once   1 .stop  阻止冒泡修饰符 &lt;div @click="parent"&gt;parent &lt;div @click.stop="child"&gt;child &lt;div @click="grandson.stop"&gt;grandson&lt;/div&g
Vue学习：Vue中的事件处理
qq_49916504的博客
06-03 485
Vue中的事件处理
vue canvas 矩形四角拖拽
最新发布
07-28
在Vue中使用canvas实现矩形四角拖拽的功能可以通过以下步骤实现： 1. 在Vue组件中创建一个canvas元素，并获取其上下文对象： ```javascript <canvas ref="canvas"></canvas> export default { mounted() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

铲屎官白茶

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

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

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

打赏作者

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

抵扣说明：

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

余额充值