• <pre id="y08ey"><del id="y08ey"><xmp id="y08ey"></xmp></del></pre>
    1. <pre id="y08ey"></pre>
      
      <p id="y08ey"><strong id="y08ey"><small id="y08ey"></small></strong></p>
      <td id="y08ey"><ruby id="y08ey"></ruby></td>
      <p id="y08ey"><strong id="y08ey"><xmp id="y08ey"></xmp></strong></p>
      <pre id="y08ey"></pre>

      <table id="y08ey"></table>
        <track id="y08ey"></track>
      1. 手機: 18919834768
        電話熱線: 0931-7603702
        網站知識
        當前位置: 主頁 > 網站知識

        vue3事件處理能力

        發布時間:2023-02-20 21:36:17???來自:未知???編輯:蘭州啟點網絡 www.syzhibo.net

        學習要點:
        1.事件處理
        2.事件修飾符
        本節課我們來開始學習 Vue3.x 的事件處理方法以及事件的修飾符能力。
        一.事件處理
        1. 先復習一下前面用過的事件能力,直接使用和使用方法,如下:
        <button v-on:click="counter++">counter+button>
        <button v-on:click="addCounter">counter+button>
        methods : {
        addCounter() {
        this.counter++
        }
        },
        2. 我們可以通過點擊執行方法,并且處理事件對象,具體如下:
        methods : {
        // event 對象,名稱自定義,e 也行
        addCounter(event) {
        console.log(event.target.innerText)
        }
        },
        PS:如果不傳遞參數,默認接受的事件對象名是 event;
        PS:如果不是 event 名稱,比如 e,則需要顯式的傳遞事件對象參數;
        3. 如果執行方法時,有普通參數傳遞,默認情況下 event 也會隱式傳遞的;
        <button v-on:click="addCounter(5)">counter+5button>
        addCounter(num) {
        this.counter += num
        console.log(event)
        // 隱式傳參事件對象名必須是 event
        }
        PS:如果要強行接受,是無法接收到事件對象參數的,比如:
        addCounter(e, num) addCounter(num, e)
        PS:只有顯式進行事件對象參數傳遞,才能有效接收;
        <button v-on:click="addCounter(5, $event)">counter+5button>
        addCounter(num, e)
        PS:事件對象用途屬于 JS 基礎知識,比如:阻止冒泡、取消默認行為,獲取觸發元素內容等;
        二.事件修飾符
        1. 系統提供了常用的事件對象修飾符,讓你直接定義視圖中事件的執行方式;
        <div v-on:click="counter++">
        <button v-on:click.stop="addCounter(5, $event)">counter+5button>
        div>
        // 只執行一次
        <button v-on:click.once="counter++">counter+button>
        PS:這里使用了.stop 修飾符,表示阻止冒泡;如果不阻止,每次會+6;全部修飾符如下:
        .stop / .prevent / .capture / .self / .once / .passive
        https://vue3js.cn/docs/zh/guide/events.html#事件修飾符
        3. 系統還提供了按鍵事件修飾符,比如回車鍵按下觸發;
        <button v-on:keyup.enter="counter++">counter+button>
        .enter / .tab /.delete / .esc / .space / .up / .down / .left / .right
        本文由:蘭州啟點網絡(www.syzhibo.net)整理發布!

        ? QQ咨詢

        建站咨詢 售前咨詢 私人訂制 售后技術

        ? 電話咨詢

        0931-7603702
        (早9:00-晚10:00)

        ? 微信咨詢

        掃碼關注
        點點租

        ? 返回頂部
        午夜无码区在线观看_久久精品国产亚洲一区二区_久久综合日本久久综合88_在线观看国产一区