7. 事件处理

最新推荐文章于 2024-07-11 20:55:36 发布

Sun Jiakai_凯

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量70

点赞数

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/s12345672/article/details/119704615

版权

Vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

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)"效果一样，但是后者可以传参

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件处理</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>欢迎来到 {{name}}</h2>
            <button v-on:click="showInfo1">点击提示信息1</button>
            <button @click="showInfo1">点击提示信息2</button>
            <button @click="showInfo2($event, 66)">点击提示信息3</button>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data:{
                    name: '上海',
                },
                methods:{
                    showInfo1(){
                        alert("上海欢迎你")
                    },
                    showInfo2(event, number){
                        console.log(event, number)
                        //alert("上海欢迎你们")
                    }
                }
            })
        </script>
    </body>
</html>

2. 事件的修饰符

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件处理</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            *{
               margin-top: 15px; 
            }
            .demo1{
                height: 40px;
                background-color: aquamarine;
            }
            .box1{
                padding: 5px;
                background-color: cyan;
            }
            .box2{
                padding: 5px;
                background-color:deeppink;
            }
        </style>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>欢迎来到 {{name}}</h2>
            <!-- prevent：阻止默认事件（常用） -->
            <a href="http://www.baidu.com" @click.prevent="goBaiDu()">点击跳转到百度</a>

            <!-- stop：阻止事件冒泡（常用） -->
            <div class="demo1" @click="goBaiDu">
                <button @click.stop="goBaiDu">点击跳转到百度</button>
            </div>

            <!-- once：事件只触发一次（常用） -->
            <button @click.once="goBaiDu">点击跳转到百度</button>

            <!-- capture：使用事件的捕获模式 -->
            <div class="box1" @click.capture="showMsg(1)">
                div1
                <div2 class="box2" @click="showMsg(2)">
                    div2
                </div2>
            </div>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data:{
                    name: '上海',
                },
                methods:{
                    goBaiDu(){
                        alert("上海欢迎您！")
                    },
                    showMsg(msg){
                        alert(msg)
                    }
                }
            })
        </script>
    </body>
</html>

Sun Jiakai_凯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7. 事件处理

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)"效果一样，但是后者可以传参<!DOCTYPE
复制链接

扫一扫