前端VUE3.0,DAY9，事件修饰符

最新推荐文章于 2024-05-22 16:40:45 发布
最新推荐文章于 2024-05-22 16:40:45 发布
阅读量777 收藏 2
点赞数
分类专栏： 前端 文章标签： javascript html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48681463/article/details/119386178
版权

VUE3.0,DAY9

事件符举例

Vue中的事件修饰符:

  1. prevent:阻止默认事件(常用) ;
  2. stop:阻止事件冒泡(常用);
  3. once: 事件只触发一 次(常用)
  4. capture:使用事件的捕获模式;
  5. self:只有event. target是当前操作的元素是才触发事件;
  6. passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

事件修饰符展示

1.当点击链接名字时，会弹窗一个提示信息，随后默认进行网页跳转。那么增加一个preventdefault则就禁止了该项默认功能，点击、弹窗后，不会进行网页跳转。
注意：在methods中的showInfo中要加入事件e，如果为空的话，则阻止的是弹窗事件。

<!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>事件修饰符</title>
    <!--引入vue.js-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>欢迎来到{{name}}学习</h1>
        <!--点击该连接，则会弹出同学你好！然后跳转至该链接的网页-->
        <a href="https://blog.csdn.net/weixin_48681463/article/details/119385312?spm=1001.2014.3001.5501"
            @click="showInfo">点我提示信息</a>
        <!--这个链接在网页中显示的名字为点我提示信息-->
    </div>


</body>
<!--数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name: '哈哈',
        },
        methods: {
            showInfo(e) {
                //preventdefault是阻止弹出后自动跳转至连接网页的默认行为
                e.preventDefault()
                alert('同学你好！')
            }
        }
    })
</script>

</html>

在这里插入图片描述
2.还有一种写法，就是在@click后直接加.prevent，就阻止了默认事件，这个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>事件修饰符</title>
    <!--引入vue.js-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>欢迎来到{{name}}学习</h1>
        <!--点击该连接，则会弹出同学你好！然后跳转至该链接的网页-->
        <a href="https://blog.csdn.net/weixin_48681463/article/details/119385312?spm=1001.2014.3001.5501"
            @click.prevent="showInfo">点我提示信息</a>
        <!--这个链接在网页中显示的名字为点我提示信息-->
    </div>


</body>
<!--数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name: '哈哈',
        },
        methods: {
            showInfo(e) {
                alert('同学你好！')
            }
        }
    })
</script>

</html>

3.前两点说的是阻止默认事件，下边讲如何阻止事件冒泡。这里在点击事件后加的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>事件修饰符</title>
    <!--引入vue.js-->
    <script type="text/javascript" src="../vue.js"></script>
    <style>
        /*其中的“*”是通配符，让所有的元素上部距离为20px*/
        * {
            margin-top: 20px;
        }

        .demo1 {
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>


<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>欢迎来到{{name}}学习</h1>
        <!--点击该连接，则会弹出同学你好！然后跳转至该链接的网页-->
        <!--加入@click.prevent则阻止了默认事件，即不会跳转网页-->
        <a href="https://blog.csdn.net/weixin_48681463/article/details/119385312?spm=1001.2014.3001.5501"
            @click.prevent="showInfo">点我提示信息</a>
        <!--这个链接在网页中显示的字符为点我提示信息-->
        <!--阻止事件冒泡的写法，如下-->
        <!--按钮button中的stop阻止了事件冒泡，如果不加的话，点击一个按钮会弹两次窗，冒泡到了div的身上-->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我试试</button>
        </div>
    </div>


</body>
<!--数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name: '哈哈',
        },
        methods: {
            showInfo(e) {
                alert('同学你好！')
            }
        }
    })
</script>

</html>

在这里插入图片描述
4.还有其他事件修饰符。该段代码展示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>事件修饰符</title>
    <!--引入vue.js-->
    <script type="text/javascript" src="../vue.js"></script>
    <style>
        /*其中的“*”是通配符，让所有的元素上部距离为20px*/
        * {
            margin-top: 20px;
        }

        .demo1 {
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>


<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>欢迎来到{{name}}学习</h1>
        <!--点击该连接，则会弹出同学你好！然后跳转至该链接的网页-->
        <!--加入@click.prevent则阻止了默认事件，即不会跳转网页-->
        <a href="https://blog.csdn.net/weixin_48681463/article/details/119385312?spm=1001.2014.3001.5501"
            @click.prevent="showInfo">点我提示信息</a>
        <!--这个链接在网页中显示的字符为点我提示信息-->
        <!--阻止事件冒泡的写法，如下-->
        <!--按钮button中的stop阻止了事件冒泡，如果不加的话，点击一个按钮会弹两次窗，冒泡到了div的身上-->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我试试</button>
        </div>
        <!--事件只触发一次，如果不加once，同一个页面内，点几次该按钮就出几次弹窗，加上once后，只有第一次点击会弹窗-->
        <button @click.once="showInfo">点我试试啊</button>
    </div>


</body>
<!--数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name: '哈哈',
        },
        methods: {
            showInfo(e) {
                alert('同学你好！')
            }
        }
    })
</script>
</html>

在这里插入图片描述
5.事件捕获修饰符，我们建立了两个盒子box1盒box2，当点击box1时，把1这个参数传递给showMessage函数，使得弹窗显示1。点击box2时也同理。当不加capture这个事件捕获修饰符时，点box2，在使用console.log打印一下，可以看出是先输出了2，在输出了1，说明点击事件的响应发生在冒泡阶段，box1是box2的父盒子，产生了冒泡，如果想让事件发生在捕获阶段，即点击box2，先输出1，然后在输出参数2.（捕获阶段，是先捕捉到box1，随后在捕捉子盒子box2），则需要在父盒子点击事件上加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>事件修饰符</title>
    <!--引入vue.js-->
    <script type="text/javascript" src="../vue.js"></script>
    <style>
        /*其中的“*”是通配符，让所有的元素上部距离为20px*/
        * {
            margin-top: 20px;
        }

        .demo1 {
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>


<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>欢迎来到{{name}}学习</h1>
        <!--点击该连接，则会弹出同学你好！然后跳转至该链接的网页-->
        <!--加入@click.prevent则阻止了默认事件，即不会跳转网页-->
        <a href="https://blog.csdn.net/weixin_48681463/article/details/119385312?spm=1001.2014.3001.5501"
            @click.prevent="showInfo">点我提示信息</a>
        <!--这个链接在网页中显示的字符为点我提示信息-->
        <!--阻止事件冒泡的写法，如下-->
        <!--按钮button中的stop阻止了事件冒泡，如果不加的话，点击一个按钮会弹两次窗，冒泡到了div的身上-->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我试试</button>
        </div>
        <!--事件只触发一次，如果不加once，同一个页面内，点几次该按钮就出几次弹窗，加上once后，只有第一次点击会弹窗-->
        <button @click.once="showInfo">点我试试啊</button>
        <!--使用事件的捕获模式-->
        <!--点击了div1就把1传递给showMessage函数，点击了div2就把2传递给showMessage函数-->
        <div class="box1" @click.capture="showMessage(1)">div1
            <div class="box2" @click="showMessage(2)">div2</div>
        </div>
    </div>


</body>
<!--数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name: '哈哈',
        },
        methods: {
            showInfo(e) {
                alert('同学你好！')
            },
            showMessage(msg) {
                console.log(msg)
            }
        }
    })
</script>

</html>

在这里插入图片描述

疯子的梦想＠
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实战（07）Vue中的@click.stop和@click.prevent
綦枫Maple的博客
05-06 5189
@click.stop：阻止事件冒泡，即阻止点击事件从子组件向父组件传播
vue的事件修饰符之.stop
qq_58174484的博客
01-24 9130
事件冒泡的解决方法
学习VUE3——事件修饰符、按键修饰符
最新发布
lss_033_lss的博客
05-22 612
为了让方法能更专注于数据逻辑而不用去处理 DOM 事件的细节，Vue 为 v-on 提供了事件修饰符。Tip：使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用会阻止元素及其子元素的所有点击事件的默认行为，而则只会阻止对元素本身的点击事件的默认行为。和修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。请勿同时使用和，因为已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则会被忽略，并且浏览器会抛出警告。
vue3 修饰符大全（近万字长文）
枫ゞ的博客
01-07 2006
本文是为了系统性的了解vue3中的修饰符，方便开发时的使用，使用修饰符可以方便地对事件进行控制和处理，提升用户体验。
Vue 3 基础[3] : 事件修饰符 (event modifier)
学习笔记
11-23 1515
如下的表单，点击 Sign Up，浏览器默认提交表单并向服务器发送HTTP请求，页面将重新加载，Vue app 将重启。 <form v-on:submit='submitForm'> <input type='text'></input> <button>Sign Up</button> </form> 为了阻止这种默认行为，有两种方法： 使用 Vanilla JS 的 pr
第36节: Vue3 事件修饰符
特创数字
12-22 430
在UniApp中使用Vue3框架时，你可以使用事件修饰符来更方便地处理用户交互事件。在上面的示例中，我们在元素上使用了@click监听事件，并在事件前添加了prevent修饰符。这个修饰符可以阻止事件的默认行为，例如页面跳转或表单提交等。在handleClick方法中，我们简单地输出了一条消息到控制台。通过使用事件修饰符，你可以更方便地处理用户交互事件，并避免不必要的默认行为。
vue事件修饰符和按键修饰符用法总结
12-03
之前关于vue事件修饰符和按键修饰符的一点分析，最近需要回顾，就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现...
前端Vue日常工作中-Vue事件修饰符
01-01
前端Vue日常工作中--Vue事件修饰符
Vue.js 事件修饰符的使用教程
10-17
在实际开发中，不可避免的会使用到对于事件的操作，如何处理 DOM 事件流，成为我们必须要掌握的技能。这篇文章主要介绍了Vue.js 事件修饰符的使用教程,需要的朋友可以参考下
Vue事件修饰符native、self示例详解
10-16
主要给大家介绍了关于Vue事件修饰符native、self的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Vue基础之指令与过滤器
fanlingfang的博客
11-06 610
ES6模块化 ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或CommonJS等模块化规范。 ES6模块化规范中定义: 每个js文件都是一个独立的模块 导入其它模块成员使用import 关键字 向外共享模块成员使用export关键字 p230 Promise async/await EventLoop 宏任务和微任务 API接口案例 前端工程化 实际的前端开发: 模块化(js的模块化、css的模块化、资源的模
vue中的修饰符
weixin_69119939的博客
06-08 3419
vue中常用修饰符
vue 事件修饰符 .passive 最通俗的理解
快乐de馒头
07-31 2285
让我给你举一个十分简单的例子，你有一个朋友要来你家，他如果提前告诉你，那么你可以提早准备午餐打扫卫生等，但是如果没有告诉，只有在等他进门时你才知道，那个时候你就来不及了。显然，不是这样的，不然vue也不会出这样一个事件修饰符。在vue中，不阻止默认事件，真正的目的是告诉浏览器，你可以不用去查询程序有没有阻止默认事件，也就是提前告诉浏览器程序不会阻止，那么意义是什么呢？vue中的事件修饰符中有一个十分特别的修饰符，vue官方文档是这样介绍的.passive会告诉浏览器你不想阻止事件的默认行为。...
VUE3 click 点击事件及修饰符
热门推荐
God's asylum的博客
07-18 1万+
VUE3 click点击事件及修饰符
Vue3.0学习笔记 五
weixin_45131334的博客
10-28 1017
文章目录前言 前言
Vue 3.0 按键修饰符
2201_75866484的博客
03-22 472
开始，Vue 3 继续支持这一点就不再有意义了。因此，现在建议对任何要用作修饰符的键使用 kebab-cased (短横线) 大小写名称。的用户，我们建议将它们转换为它们的 kebab-cased (短横线) 命名对齐。现在也已弃用，不再受支持。在 Vue 2 中，支持。对于那些在代码库中使用。此外，你可以通过全局。
vue3 - 事件处理之事件修饰符
m0_50080847的博客
02-15 121
内容取自>> <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-...
Vue3 v-on 事件监听 修饰符
海胆的博客
05-09 564
事件修饰符 只能对原生的 DOM 事件起作用的修饰符： .stop 组织事件冒泡传播 .prevent 阻止浏览器默认行为 如：a链接跳转页面，form submit会刷新页面，鼠标右键弹出菜单等 .capture 事件捕获模式 .self 当event.target是当前元素自身时触发 .once 只会触发一次 .passive 对应addEventListener 中的 passive 选项 .passive 会告诉浏览器你不想阻止事件的默认行为 按键修饰符 常用的键别名： .enter .
Vue修饰符的总结归纳（Vue2和Vue3通用）
有事儿私信。
10-01 1611
在Vue.js中，修饰符是一种简洁的语法糖，用于修改Vue指令的行为。这些修饰符可以让我们更简洁地处理一些常见场景，比如表单输入的延迟绑定、输入值的格式化等。了解和掌握Vue的修饰符，可以让我们在开发过程中更加高效和灵活。
帮我生成一份前端vue3.0加Javascript的前端项目框架
06-06
好的，以下是一个简单的前端Vue 3.0和JavaScript项目框架： 1. 首先，你需要安装 Node.js 和 Vue CLI。请确保你已经安装了最新版本的 Node.js 并且已经配置好了环境变量。 2. 打开命令行窗口，输入以下命令来安装 Vue CLI： ``` npm install -g @vue/cli ``` 3. 创建一个新的 Vue 3.0 项目并且使用 JavaScript 作为主要编程语言： ``` vue create my-project --default cd my-project vue add router vue add vuex ``` 4. 经过上述步骤，你已经成功地创建了一个 Vue 3.0 项目并且添加了 Vue Router 和 Vuex。现在你可以使用以下命令启动项目： ``` npm run serve ``` 5. 接下来你可以在 src 目录下创建一个 main.js 文件，这是 Vue 3.0 项目的入口文件。在 main.js 文件中添加以下代码： ``` import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' createApp(App).use(router).use(store).mount('#app') ``` 6. 现在你可以在 src 目录下创建一个 App.vue 文件，这是 Vue 3.0 项目的根组件。在 App.vue 文件中添加以下代码： ```html <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> ``` 7. 最后，你可以在 src/views 目录下创建一个 Home.vue 文件，这是一个简单的视图组件。在 Home.vue 文件中添加以下代码： ```html <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { name: 'Home', data() { return { message: 'Hello, World!' } } } </script> ``` 现在你已经成功地创建了一个基于 Vue 3.0 和 JavaScript 的前端项目框架。你可以根据需要修改和扩展该框架。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值