欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

1.基本使用

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

v-on 指令可以縮寫為 @ 符號。

語法格式：

v-on:click="methodName"

或

@click="methodName"

一個最簡單的事例：

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

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

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

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

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

事件處理程序中可以有多個方法，這些方法由逗號運算符分隔：

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

2.事件修飾符

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

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

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

例子：

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

實操：

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

添加了事件修飾符，此按鈕只能點擊一次

3.按鍵修飾符

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

例如：

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

實例：

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

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

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

相關(guān)文章

最新評論