亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3學(xué)習(xí)之事件處理詳解

 更新時(shí)間：2022年12月07日 09:11:29   作者：世界盡頭與你  
Vue事件處理是每個(gè)Vue項(xiàng)目的必要方面。 它用于捕獲用戶輸入，共享數(shù)據(jù)以及許多其他創(chuàng)造性方式。本文將通過簡(jiǎn)單的示例為大家講解了Vue3中事件處理的使用，需要的可以參考一下

1.基本使用

我們可以使用 v-on 指令來監(jiān)聽 DOM 事件，從而執(zhí)行 JavaScript 代碼。

v-on 指令可以縮寫為 @ 符號(hào)。

語(yǔ)法格式：

v-on:click="methodName"

或

@click="methodName"

一個(gè)最簡(jiǎn)單的事例：

<div id="app">
    <button @click="counter += 1">增加 1</button>
    <p>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次。</p>
</div>

<script>
    const app = {
        data() {
            return {
                counter: 0
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>

但是在通常情況下，我們需要使用一個(gè)方法來調(diào)用 JavaScript 方法。

v-on 可以接收一個(gè)定義的方法來調(diào)用。

<div id="app">
    <button @click="greet">點(diǎn)我</button>
</div>
<script>
    const app = {
        data() {
            return {
                name: 'Dahe'
            }
        },
        methods: {
            greet(event) {
                alert('Hello ' + this.name + '!')
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>

事件處理程序中可以有多個(gè)方法，這些方法由逗號(hào)運(yùn)算符分隔：

<div id="app">
    <!-- 這兩個(gè) one() 和 two() 將執(zhí)行按鈕點(diǎn)擊事件 -->
    <button @click="one($event),two($event)">
        點(diǎn)我
    </button>
</div>
<script>
    const app = {
        data() {
        },
        methods: {
            one(event) {
                alert("第一個(gè)事件處理器邏輯...")
            },
            two(event) {
                alert("第二個(gè)事件處理器邏輯...")
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>

2.事件修飾符

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細(xì)節(jié)

Vue.js 通過由點(diǎn) . 表示的指令后綴來調(diào)用修飾符。

  • .stop - 阻止冒泡
  • .prevent - 阻止默認(rèn)事件
  • .capture - 阻止捕獲
  • .self - 只監(jiān)聽觸發(fā)該元素的事件
  • .once - 只觸發(fā)一次
  • .left - 左鍵事件
  • .right - 右鍵事件
  • .middle - 中間滾輪事件

例子：

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- click 事件只能點(diǎn)擊一次 -->
<a v-on:click.once="doThis"></a>

實(shí)操：

<div id="app">
    <button v-on:click.once="counter += 1">增加 1</button>
    <p>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次。</p>
</div>

添加了事件修飾符，此按鈕只能點(diǎn)擊一次

3.按鍵修飾符

Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：

例如：

<!-- 只有在按住鍵盤enter鍵時(shí)調(diào)用 vm.submit() -->
<input v-on:keyup.enter="submit">

實(shí)例：

<div id="app">
    <button v-on:keyup.enter="counter += 1">增加 1</button>
    <p>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次。</p>
</div>

此時(shí)按鈕只有在選中后按住enter鍵才能執(zhí)行 + 1 操作：

到此這篇關(guān)于Vue3學(xué)習(xí)之事件處理詳解的文章就介紹到這了,更多相關(guān)Vue3事件處理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論