Vue的事件

事件处理

事件的基本使用：

        1. 使用v-on:xxx 或 @xxx绑定事件，其中xxx是事件名
        2. 事件的回调需要配置在methods对象中，最终会出现在vm上
        3. methods中配置的函数，不要使用箭头函数，否则this就不是vm了
        4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象
        5. @click="demo"  和 @click = "demo($event)"效果一样，但后者可以传参
<body>
    <div id="root">
        <h1>你好，{{name}}</h1>
        <button v-on:click="Tip">点我提示信息</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:"#root",
            data:{
                name:"选",
            },
            methods:{
                Tip(){
                    alert("你最好有事！")
                }
            }
        })
    </script>
</body>

事件的修饰符

Vue中的事件修饰符：

        1. prevent:阻止默认事件（常用）
        2. stop ： 阻止事件冒泡（常用）
        3. once : 事件只触发一次（常用）
        4. capture ： 使用事件的捕获模式
        5. self : 只有event.target 是当前操作元素时，才会触发该事件
        6. passive: 事件的默认行为立即执行，无需等待事件回调执行完成，（手机端常用）
        事件的修饰符可以连着写（@click.prevent.stop="方法"）
<body>
    <!-- 
        Vue中的事件修饰符：
            1. prevent:阻止默认事件（常用）
            2. stop ： 阻止事件冒泡（常用）
            3. once : 事件只触发一次（常用）
            4. capture ： 使用事件的捕获模式
            5. self : 只有event.target 是当前操作元素时，才会触发该事件
            6. passive: 事件的默认行为立即执行，无需等待事件回调执行完成，（手机端常用）
            事件的修饰符可以连着写（@click.prevent.stop="方法"）
     -->
    <div id="root">
        <h1>你好，{{name}}</h1>
        <!--  1. prevent:阻止默认事件（常用） 在a标签中可以阻止页面跳转 -->
        <a href="https://www.taobao.com" @click.prevent="showinfo">点击提示信息</a>
        <!-- 2. stop ： 阻止事件冒泡（常用） -->
        <div id="box" @click="showinfo">
            <button id="btn" @click.stop="showinfo"> 点我提示信息</button>
        </div>
        <!-- 3. once : 事件只触发一次（常用） -->
        <button @click.once="showinfo">点我提示信息</button>
        <!-- 4. capture ： 使用事件的捕获模式  (先执行外面的事件)-->
        <div id="box1" @click.capture="showinfo1">
            <button id="btn1" @click="showinfo">点我提示信息</button>
        </div>
        <!-- 5. self : 只有event.target 是当前操作元素时，才会触发该事件 有阻止冒泡的效果-->
        <div id="box1" @click.self="showinfo1"> 
            <button id="btn1" @click="showinfo">self</button>
        </div>
        <!-- 6. passive: 事件的默认行为立即执行，无需等待事件回调执行完成，（手机端常用） -->
        <ul id="list" @wheel.passive="show">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:"#root",
            data:{
                name:"选",
            },
            methods:{
                showinfo(){
                    alert("你最好有事！(里)");
                },
                showinfo1(){
                    alert("你被捕获了（外）")
                },
                show(){
                    for (let i = 0; i < 100000; i++) {
                        console.log("i");
                    }
                }
            }
        })
    </script>
</body>

键盘事件

    1. Vue中常用的按键别名：
        回车=> enter
        删除=> delete (获取"删除"退格"键)
        退出 => esc
        空格 => space
        换行 => tab (特殊，必须配合keydown去使用)
        上 => up
        下 =>down
        左  =>left
        右 => right
    2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意转为keaba-case(短横线命名)
 
    3. 系统修饰符（用法特殊）：ctrl .alt.shift.win  (可以在后面添加按键，组合使用，只有系统按键才能组合)
        1.配合keyup使用： 按下修饰键的同时，再按下其他键，随后释放其他键，事件才触发
        2.配合keydown使用：正常触发事件
    4. 也可以使用keyCode去指定具体按键（不推荐）
    5.Vue.config.keyCodes.自定义键名 = 键码（keyCode) 可以去定制按键别名(不推荐)
 
<body>
 
    <div id="root">
        <h1>你好，{{name}}</h1>
        <input type="text" placeholder="请输入" @keydown.ctrl.y="keyevent">
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:"#root",
            data:{
                name:"彭可选",
            },
            methods:{
                keyevent(event){
                    console.log(event.target.value)
                }
            }
        })
    </script>
</body>
posted @   小罗要有出息  阅读(631)  评论(0)  编辑  收藏  举报
相关博文：
· Vue基础知识
· Vue生命周期
· （1）vue基础——1.7 事件处理
· 5. 事件处理
· vue2_6、事件处理
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示