Vue3.事件處理

1.綁定監(jiān)聽
  1. v-on:xxx="fun"
  2. @xxx="fun"
  3. @xxx="fun(參數)"
  4. 默認事件形參: event
  5. 隱含屬性對象: $event
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件的基本使用</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 
        事件的基本使用：
                    1.使用v-on:xxx 或 @xxx 綁定事件，其中xxx是事件名；
                    2.事件的回調需要配置在methods對象中，最終會在vm上；
                    3.methods中配置的函數，不要用箭頭函數！否則this就不是vm了；
                    4.methods中配置的函數，都是被Vue所管理的函數，this的指向是vm 或 組件實例對象；
                    5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以傳參；
-->
<!--準備好一個容器-->
<div id="root">
    <h2>{{Saturday}}</h2>
    <button v-on:click="showInfo1">點擊提示信息1(不傳參)</button>
    <button v-on:click="showInfo2(66,$event)">點擊提示信息2(傳參)</button>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  // 設置為 false 以阻止 vue 在啟動時生成生產提示。


    const vm = new Vue({
        el: '#root',
        data: {
            Saturday: '星期六',
        },
        methods: {
            showInfo1(event) {
                // console.info(event.target.innerText)
                console.info(this) //此處的this是vm
                alert("Hello1")
            },
            showInfo2(number, e) {
                console.info(number)
                console.info(e.target.innerText)
                console.info(this) //此處的this是vm
                // alert("Hello2")
            },
        }
    })
</script>
</html>
2.事件修飾符
  1. prevent : 阻止事件的默認行為 event.preventDefault()
  2. stop : 停止事件冒泡 event.stopPropagation()
  3. once：事件只觸發(fā)一次
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>事件修飾符</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        * {
            margin-top: 20px;
        }

        .demo1 {
            height: 50px;
            background-color: skyblue;
        }

        .box1 {
            padding: 5px;
            background-color: skyblue;
        }

        .box2 {
            padding: 5px;
            background-color: orange;
        }

        .list {
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;
        }

        li {
            height: 100px;
        }
    </style>
</head>
<body>
<!--
        Vue中的事件修飾符：
                1.prevent：阻止默認事件（常用）；
                2.stop：阻止事件冒泡（常用）；
                3.once：事件只觸發(fā)一次（常用）；
                4.capture：使用事件的捕獲模式；
                5.self：只有event.target是當前操作的元素時才觸發(fā)事件；
                6.passive：事件的默認行為立即執(zhí)行，無需等待事件回調執(zhí)行完畢；
-->
<!-- 準備好一個容器-->
<div id="root">
    <h2>{{week}}</h2>
    <!--阻止默認事件（常用）-->
    <a  @click.prevent="showInfo">百度一下</a>

    <!--阻止事件冒泡（常用）-->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">點擊提示信息</button>
    </div>
    <!--事件只觸發(fā)一次（常用）-->
    <button @click.once="showInfo">點擊提示信息</button>

    <!--使用事件的捕獲模式-->
    <div class="box1" @click.capture="showMsg('one')">
        div1
        <div class="box2" @click="showMsg('two')">
            div2
        </div>
    </div>

    <!--只有event.target是當前操作的元素時才觸發(fā)事件；-->
    <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">點擊提示信息</button>
    </div>

    <!-- 事件的默認行為立即執(zhí)行，無需等待事件回調執(zhí)行完畢；-->
    <ul @wheel.passive="demo" class="list">
        <li>Saturday</li>
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
    </ul>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。

    new Vue({
        el: '#root',
        data: {
            week: 'Saturday'
        },
        methods: {
            showInfo(e) {
                alert('Hello')
                // console.log(e.target)
            },
            showMsg(msg) {
                console.log(msg)
            },
            demo() {
                for (let i = 0; i < 100000; i++) {
                    console.log('#')
                }
                console.log('循環(huán)結束')
            }
        }
    })
</script>
</html>
3.按鍵修飾符
  • Vue中常用的按鍵別名：
    回車 => enter
    刪除 => delete (捕獲“刪除”和“退格”鍵)
    退出 => esc
    空格 => space
    換行 => tab (特殊，必須配合keydown去使用)
    上 => up
    下 => down
    左 => left
    右 => right
  • Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但注意要轉為caps-lock（短橫線命名）
  • 系統(tǒng)修飾鍵（用法特殊）：ctrl、alt、shift、meta
    (1).配合keyup使用：按下修飾鍵的同時，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。
    (2).配合keydown使用：正常觸發(fā)事件。
  • 也可以使用keyCode去指定具體的按鍵（不推薦）
  • Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定制按鍵別名
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>鍵盤事件</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 準備好一個容器-->
<div id="root">
    <h2>{{week}}</h2>
    <input type="text" placeholder="按下回車提示輸入" @keydown.enter="showInfo">
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
    Vue.config.keyCodes.huiche = 13 //定義了一個別名按鍵
    new Vue({
        el: '#root',
        data: {
            week: 'Saturday'
        },
        methods: {
            showInfo(e) {
                console.log(e.target.value)
            }
        },
    })
</script>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容