Vue——事件处理及时间修饰符

前端小董～～～

于 2023-03-06 13:33:20 发布

阅读量585

点赞数

分类专栏： Vue.js 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_53912558/article/details/129359630

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、事件处理
1.事件的基本使用：
1）使用v-on:事件名或 @事件名绑定事件。
2）时间的回调要配置在methods对象中，最终会出现在Vue实例对象身上。
3）methods对象中配置的函数，不要使用箭头函数！否则this的指向就不是Vue的实例对象了。
4）methods对象中配置的函数都是被Vue所管理的，this的指向是vm或组件实例对象。
2.一个例子：这是一个点击事件

<!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>
    <!-- 引入Vue -->
    <script src="./vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>欢迎来到{{address}}旅行</h2>
        <button @click="showInfo">点击我提示信息</button>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                address: '陕西咸阳',
            },
            methods: {
                showInfo() {
                    alert('欢迎大家来到咸阳！')
                }
            }
        })
    </script>
</body>

</html>

打开控制台：点击按钮后会提示信息。
在这里插入图片描述
3、其他时间处理

@scoll  //滚动条事件

@keyup //键盘事件（在松开时触发）

二、事件修饰符
1、Vue中的事件修饰符
1）prevent: 阻止默认事件(常用)；
2）stop：阻止事件冒泡(常用)；
3）once：事件只触发一次(常用)；
4）capture：使用事件的捕获模式；
5）self：只有event.target是当前操作的元素时才触发事件；
6）passive: 时间的默认行为立即执行，无需等待事件回调执行完毕。
2、时间修饰符的使用
时间修饰符一般写在事件名的后面
例： @click.stop
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>
    <!-- 引入Vue -->
    <script src="./vue.js"></script>
</head>

<body>
    <div id="root">
        <a href="https://www.baidui.com" @click.prevent="showInfo">点击跳转百度官网</a>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {

            },
            methods: {
                showInfo() {
                    alert('对不起，不能跳转，您已阻止默认事件！')
                }
            }
        })
    </script>
</body>

</html>

打开浏览器：
在这里插入图片描述

前端小董～～～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue——事件处理及时间修饰符

3）methods对象中配置的函数，不要使用箭头函数！4）methods对象中配置的函数都是被Vue所管理的，this的指向是vm或组件实例对象。2）时间的回调要配置在methods对象中，最终会出现在Vue实例对象身上。5）self：只有event.target是当前操作的元素时才触发事件；6）passive: 时间的默认行为立即执行，无需等待事件回调执行完毕。4）capture：使用事件的捕获模式；'对不起，不能跳转，您已阻止默认事件！2）stop：阻止事件冒泡(常用)；1、Vue中的事件修饰符。
复制链接

扫一扫

专栏目录