Javascript

Vue事件 事件处理 事件修饰符 键盘事件与别名

本文主要是介绍Vue事件 事件处理 事件修饰符 键盘事件与别名，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Vue事件

  • 事件处理
  • 事件修饰符
  • 键盘事件

事件处理

事件绑定: v-on:click
事件不传参：v-on:click="fn"
事件传参：v-on:click="fn(arg,$event)"
v-on也可以写成@click

    <div id="root">
        <h1 v-on:click="showInfo">{{text1}}</h1>
        <h1 v-on:click="showInfo2(66,$event)">{{text2}}</h1>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el:"#root",
            data:{
                text1:'点击事件不传参',
                text2:'点击事件传参带event'
            },
            methods:{
                showInfo(event){
                    console.log(event);
                },
                showInfo2(num,e){
                    console.log(num,e);
                },
            }
        })

事件修饰符

  • prevent 阻止默认事件
  • stop 阻止事件冒泡
  • once 事件只触发一次
  • capture 事件捕获
  • self event.target是当前操作的元素才触发
  • passive
    事件的默认行为立即执行，无需等待事件回调函数执行完毕。 也就是说，事件在浏览器上的效果立刻出来，而不用等待回调函数执行完毕再出来。并不是所有事件都是先等回调函数先执行完(比如scroll就不需要等待，而wheel需要)，一般移动端用得多。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../lib/vue.js"></script>
<style>
    .page {
        display: flex;
        flex-direction: column;
        gap: 20px 0;
    }

    .page .vertical-box {
        display: flex;
        flex-direction: column;
    }

    .outer {
        background: lightcoral;
        height: 50px;
    }

    .inner {
        background: lightseagreen;
        height: 30px;
    }

    .scroll-box {
        height: 100px;
        width: 200px;
        overflow: scroll;
        background: lightsalmon;
    }

    .scroll-box .inner {
        background: lightskyblue;
        height: 500px;
        width: 50px;
    }
</style>

<body>
    <!-- 
        - prevent 阻止默认事件
        - stop 阻止事件冒泡
        - once 事件只触发一次
        - capture 事件捕获
        - self event.target是当前操作的元素才触发
        - passive 
        事件的默认行为立即执行，无需等待事件回调函数执行完毕。 也就是说，事件在浏览器上的效果立刻出来，而不用等待回调函数执行完毕再出来。并不是所有事件都是先等回调函数先执行完(比如scroll就不需要等待，而wheel需要)，一般移动端用得多。
    -->
    <div id="root" class="page">
        <!-- prevent 阻止默认事件 -->
        <div class="vertical-box">
            <a href="//baidu.com">点我跳转</a>
            <a @click.prevent="showInfo" href="//baidu.com">点我跳转(阻止默认事件)</a>
        </div>

        <!-- stop 阻止事件冒泡 -->
        <div class="vertical-box outer" @click="outerHandler">
            阻止事件冒泡-外层
            <span class="inner" @click.stop="innerHandler">阻止事件冒泡-内层</span>
        </div>

        <!-- 事件只触发一次 -->
        <div class="vertical-box" @click.once="outerHandler">
            我只触发一次
        </div>

        <!-- 事件捕获 -->
        <div class="vertical-box outer" @click.capture="outerHandler">
            事件捕获-外层
            <span class="inner" @click="innerHandler">事件捕获-内层</span>
        </div>

        <!-- self event.target是当前操作的元素才触发 -->
        <div class="vertical-box outer" @click.self="outerHandler">
            self-外层
            <span class="inner" @click="innerHandler">self-内层</span>
        </div>

        <!-- passive 事件默认行为立即执行，不用等待回调函数执行完毕 -->
        <div class="scroll-box" @wheel.passive="showInfo">
            <div class="inner">inner</div>
        </div>

    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: "#root",
            data: {
                text1: '点击事件不传参',
                text2: '点击事件传参带event'
            },
            methods: {
                showInfo(event) {
                    console.log('show info run ~~~')
                    // passive wheel
                    // Array(100).fill().forEach(v => console.log('event handler'))
                },
                outerHandler() {
                    console.log('外层点击事件触发了')
                },
                innerHandler() {
                    console.log('内层点击事件触发了')
                }
            }
        })

    </script>
</body>

</html>

键盘事件

Vue中常用的事件别名

  • enter 回车
  • delete 删除
  • 退出 esc
  • 空格 space
  • 换行 tab
  • 上、下、左、右 up、down、left、right
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../lib/vue.js"></script>


<body>
    <!-- 
        Vue中常用的事件别名
            - enter 回车
            - delete 删除
            - 退出 esc
            - 空格 space
            - 换行 tab
            - 上、下、左、右 up、down、left、right
     -->
    <div id="root" >
        <input type="text" placeholder="按回车获取提示" @keyup.delete="showInfo" >
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 组织vue在启动时自动生成提示
        const vm = new Vue({
            el: "#root",
            data: {},
            methods: {
                showInfo(event) {
                    console.log(event.keyCode)
                }
            }
        })

    </script>
</body>

</html>
这篇关于Vue事件 事件处理 事件修饰符 键盘事件与别名的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航