詳解Vue之事件處理

更新時間：2020年07月10日 11:28:32 作者：Alan.hsiang

這篇文章主要介紹了Vue之事件處理的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下。

在Vue進(jìn)行前端開發(fā)中，事件監(jiān)聽是必不可少的功能，本文通過簡單的小例子，簡述v-on的簡單用法，僅供學(xué)習(xí)分享使用，如有不足之處，還請指正。

監(jiān)聽事件

可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼。如下所示：

 <button v-on:click="counter += 1">Add 1</button>
 <p>按鈕被點擊了 {{ counter }} 次.</p>

其中counter為Vue自定義的一個屬性值。

事件處理方法

事實上，許多事件處理邏輯會更為復(fù)雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要調(diào)用的方法名稱。如下所示：

<button v-on:click="greet">Greet</button>

greet 是在下面定義的方法名。如下所示：

<script type="text/javascript">
 var app=new Vue({
  el:'#app',
  data:{
   msg:'hello world!!!',
   counter:0,
   name: 'Vue.js'
  },
  // 在 `methods` 對象中定義方法
  methods:{
   greet: function (event) {
    // `this` 在方法里指向當(dāng)前 Vue 實例
    alert('Hello ' + this.name + '!')
     // `event` 是原生 DOM 事件
    if (event) {
     alert(event.target.tagName)
    }
   },

  }
 });
</script>

內(nèi)聯(lián)處理器中的方法

除了直接綁定到一個方法，也可以在內(nèi)聯(lián) JavaScript 語句中調(diào)用方法，如下所示：

<button v-on:click="say('hi')">Say hi</button> 
<button v-on:click="say('what')">Say what</button>

有時也需要在內(nèi)聯(lián)語句處理器中訪問原始的 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法：

<button v-on:click="warn('表單不能被提交.', $event)">提交</button>

其中say，warn均為自定義方法，如下所示：

say: function (message) {
 alert(message);
},
warn: function (message, event) {
 // 現(xiàn)在我們可以訪問原生事件對象
 if (event) {
  event.preventDefault();
 }
 alert(message);
}

事件修飾符

在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現(xiàn)這點，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。事件修飾符共以下幾種：

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis">點擊666</a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit">
 <div>阻止提交</div>
</form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent>
 <div id="d">只有修飾符</div>
</form>
<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">doThis...</div>
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">doThat...</div>

使用修飾符時，順序很重要；相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

新增屬性

不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。

<!-- 點擊事件將只會觸發(fā)一次 -->
<a v-on:click.once="doThis">點我一次666</a>

Vue 還對應(yīng) addEventListener 中的 passive 選項提供了 .passive 修飾符。

<!-- 滾動事件的默認(rèn)行為 (即滾動行為) 將會立即觸發(fā) -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

這個 .passive 修飾符尤其能夠提升移動端的性能。不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認(rèn)行為。

按鍵修飾符

在監(jiān)聽鍵盤事件時，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符：

 <!-- 只有在 `key` 是 `Enter` 時調(diào)用 `vm.submit()` ,點擊時不調(diào)用 -->
 <input v-on:keyup.enter="submit" type="text" value="點我777" />
 <!-- 可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉(zhuǎn)換為 kebab-case 來作為修飾符。-->
 <input v-on:keyup.page-down="onPageDown" type="text" value="點我888" />
 <!-- 在上述示例中，處理函數(shù)只會在 $event.key 等于 PageDown 時被調(diào)用。且光標(biāo)在時才管用。 -->

系統(tǒng)修飾符

可以用如下修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。

.ctrl
.alt
.shift
.meta

注意：在 Mac 系統(tǒng)鍵盤上，meta 對應(yīng) command 鍵 (⌘)。在 Windows 系統(tǒng)鍵盤 meta 對應(yīng) Windows 徽標(biāo)鍵 (⊞)。在 Sun 操作系統(tǒng)鍵盤上，meta 對應(yīng)實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機(jī)器的鍵盤、以及其后繼產(chǎn)品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標(biāo)記為“META”。在 Symbolics 鍵盤上，meta 被標(biāo)記為“META”或者“Meta”。

 <!-- Alt + C -->
 <input @keyup.alt.67="clear">
 
 <!-- Ctrl + Click -->
 <div @click.ctrl="doSomething">Do something</div>

請注意：修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時，事件觸發(fā)時修飾鍵必須處于按下狀態(tài)。換句話說，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發(fā) keyup.ctrl。而單單釋放 ctrl 也不會觸發(fā)事件。如果你想要這樣的行為，請為 ctrl 換用 keyCode：keyup.17。

.exact 修飾符

.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。

 <!-- 即使 Alt 或 Shift 被一同按下時也會觸發(fā) -->
 <button @click.ctrl="onClick">A</button>
 <!-- 有且只有 Ctrl 被按下的時候才觸發(fā) -->
 <button @click.ctrl.exact="onCtrlClick">A</button>
 <!-- 沒有任何系統(tǒng)修飾符被按下的時候才觸發(fā) -->
 <button @click.exact="onClick">A</button>

鼠標(biāo)按鈕修飾符

這些修飾符會限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕，如下所示：

.left
.right
.middle

為什么在 HTML 中監(jiān)聽事件?

你可能注意到這種事件監(jiān)聽的方式違背了關(guān)注點分離 (separation of concern) 這個長期以來的優(yōu)良傳統(tǒng)。但不必?fù)?dān)心，因為所有的 Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的 ViewModel 上，它不會導(dǎo)致任何維護(hù)上的困難。實際上，使用 v-on 有幾個好處：

掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應(yīng)的方法。
因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測試。
當(dāng)一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔(dān)心如何清理它們。

本例中全部代碼如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>事件處理</title>
    <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>監(jiān)聽事件</h2>
      <!--
       可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼。
       -->
      <button v-on:click="counter += 1">Add 1</button>
      <p>按鈕被點擊了 {{ counter }} 次.</p>
      <h2>事件處理方法</h2>
      <!--
       然而許多事件處理邏輯會更為復(fù)雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。
       因此 v-on 還可以接收一個需要調(diào)用的方法名稱。
       -->
      <!-- `greet` 是在下面定義的方法名 -->
      <button v-on:click="greet">Greet</button>
      <!--
       // 也可以用 JavaScript 直接調(diào)用方法
       //app.greet() // => 'Hello Vue.js!'
       -->
       <h2>內(nèi)聯(lián)處理器中的方法</h2>
       <!--
       除了直接綁定到一個方法，也可以在內(nèi)聯(lián) JavaScript 語句中調(diào)用方法：
       -->
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
      <!--
      有時也需要在內(nèi)聯(lián)語句處理器中訪問原始的 DOM 事件。可以用特殊變量 $event 把它傳入方法：
       -->
       <br>
       <button v-on:click="warn('表單不能被提交.', $event)">提交</button>
       <h2>事件修飾符</h2>
       <!--
       在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。
       盡管我們可以在方法中輕松實現(xiàn)這點，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。
       為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。
       .stop
      •.prevent
      •.capture
      •.self
      •.once
      •.passive
       -->
      <!-- 阻止單擊事件繼續(xù)傳播 -->
      <a v-on:click.stop="doThis">點擊666</a>
      <br>
      <!-- 提交事件不再重載頁面 -->
      <form v-on:submit.prevent="onSubmit">
        <div>
          阻止提交
        </div>
      </form>
      <br>
      <!-- 修飾符可以串聯(lián) -->
      <a v-on:click.stop.prevent="doThat"></a>
      <br>
      <!-- 只有修飾符 -->
      <form v-on:submit.prevent>
        <div id="d">
          只有修飾符
        </div>
      </form>
      <br>
      <!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
      <!-- 即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
      <div v-on:click.capture="doThis">doThis...</div>
      <br>
      <!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù) -->
      <!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
      <div v-on:click.self="doThat">doThat...</div>
      <!--
      使用修飾符時，順序很重要；相應(yīng)的代碼會以同樣的順序產(chǎn)生。
      因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
       -->
      <h2>新增</h2>
      <!-- 點擊事件將只會觸發(fā)一次 -->
      <a v-on:click.once="doThis">點我一次666</a>
      <!--
       不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。
       -->
       <!--
       Vue 還對應(yīng) addEventListener 中的 passive 選項提供了 .passive 修飾符。
       -->
      <!-- 滾動事件的默認(rèn)行為 (即滾動行為) 將會立即觸發(fā) -->
      <!-- 而不會等待 `onScroll` 完成 -->
      <!-- 這其中包含 `event.preventDefault()` 的情況 -->
      <div v-on:scroll.passive="onScroll">...</div>
      <!--
      這個 .passive 修飾符尤其能夠提升移動端的性能。
      !不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。
      請記住，.passive 會告訴瀏覽器你不想阻止事件的默認(rèn)行為。
       -->
       <h2>按鍵修飾符</h2>
       <!--
       在監(jiān)聽鍵盤事件時，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符：
       -->
      <!-- 只有在 `key` 是 `Enter` 時調(diào)用 `vm.submit()` ,點擊時不調(diào)用 -->
      <input v-on:keyup.enter="submit" type="text" value="點我777" />
      <!--
       可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉(zhuǎn)換為 kebab-case 來作為修飾符。
       -->
       <input v-on:keyup.page-down="onPageDown" type="text" value="點我888" />
       <!--
       在上述示例中，處理函數(shù)只會在 $event.key 等于 PageDown 時被調(diào)用。且光標(biāo)在時才管用。
       -->
       <h2>#按鍵碼</h2>
      <!--
      keyCode 的事件用法已經(jīng)被廢棄了并可能不會被最新的瀏覽器支持。 使用 keyCode attribute 也是允許的：
       -->
      <input v-on:keyup.13="submit" type="button" value="key up 13">
      <!--
       為了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數(shù)常用的按鍵碼的別名：
       .enter
      •.tab
      •.delete (捕獲“刪除”和“退格”鍵)
      •.esc
      •.space
      •.up
      •.down
      •.left
      •.right
      !有一些按鍵 (.esc 以及所有的方向鍵) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，這些內(nèi)置的別名應(yīng)該是首選。
      你還可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：
      // 可以使用 `v-on:keyup.f1`
      Vue.config.keyCodes.f1 = 112
       -->
       <h2>系統(tǒng)修飾鍵</h2>
       <!--
       可以用如下修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。
       .ctrl
      •.alt
      •.shift
      •.meta
      注意：在 Mac 系統(tǒng)鍵盤上，meta 對應(yīng) command 鍵 (⌘)。
      在 Windows 系統(tǒng)鍵盤 meta 對應(yīng) Windows 徽標(biāo)鍵 (⊞)。在 Sun 操作系統(tǒng)鍵盤上，meta 對應(yīng)實心寶石鍵 (◆)。
      在其他特定鍵盤上，尤其在 MIT 和 Lisp 機(jī)器的鍵盤、以及其后繼產(chǎn)品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標(biāo)記為“META”。
      在 Symbolics 鍵盤上，meta 被標(biāo)記為“META”或者“Meta”。
       -->
      <!-- Alt + C -->
      <input @keyup.alt.67="clear">

      <!-- Ctrl + Click -->
      <div @click.ctrl="doSomething">Do something</div>
      <!--
      !請注意修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時，事件觸發(fā)時修飾鍵必須處于按下狀態(tài)。
      換句話說，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發(fā) keyup.ctrl。而單單釋放 ctrl 也不會觸發(fā)事件。
      如果你想要這樣的行為，請為 ctrl 換用 keyCode：keyup.17。
       -->
      <h2>#.exact 修飾符</h2>
      <!--
       .exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。
       -->
       <!-- 即使 Alt 或 Shift 被一同按下時也會觸發(fā) -->
      <button @click.ctrl="onClick">A</button>

      <!-- 有且只有 Ctrl 被按下的時候才觸發(fā) -->
      <button @click.ctrl.exact="onCtrlClick">A</button>

      <!-- 沒有任何系統(tǒng)修飾符被按下的時候才觸發(fā) -->
      <button @click.exact="onClick">A</button>
      <h2>#鼠標(biāo)按鈕修飾符</h2>
      <!--
       .left
      •.right
      •.middle

      這些修飾符會限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕。

       -->
       <h2>為什么在 HTML 中監(jiān)聽事件?</h2>
       <!--
       你可能注意到這種事件監(jiān)聽的方式違背了關(guān)注點分離 (separation of concern) 這個長期以來的優(yōu)良傳統(tǒng)。
       但不必?fù)?dān)心，因為所有的 Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的 ViewModel 上，它不會導(dǎo)致任何維護(hù)上的困難。
       實際上，使用 v-on 有幾個好處：
      1.掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應(yīng)的方法。
      2.因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測試。
      3.當(dāng)一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔(dān)心如何清理它們。
       -->
    </div>
    <script type="text/javascript">
      var app=new Vue({
        el:'#app',
        data:{
          msg:'hello world!!!',
          counter:0,
          name: 'Vue.js'
        },
        // 在 `methods` 對象中定義方法
        methods:{
          greet: function (event) {
           // `this` 在方法里指向當(dāng)前 Vue 實例
           alert('Hello ' + this.name + '!')
           // `event` 是原生 DOM 事件
           if (event) {
            alert(event.target.tagName)
           }
          },
          say: function (message) {
           alert(message);
          },
          warn: function (message, event) {
            // 現(xiàn)在我們可以訪問原生事件對象
            if (event) {
             event.preventDefault();
            }
            alert(message);
          },
          doThis:function(){
            alert('點我666');
          },
          doThat:function(){
            alert('點它666');
          },
          submit:function(){
            alert('點我--submit');
          },
          onPageDown:function(){
            alert('點我--onPageDown');
          },
          doSomething:function(){
            alert('點我--doSomething');
          },
          clear:function(){
            alert('點我--clear');
          },
          onClick:function(){
            alert('點我--onClick');
          },
          onCtrlClick:function(){
            alert('點我--onCtrlClick');
          }
        }
      });
    </script>
  </body>
</html>

以上就是詳解Vue之事件處理的詳細(xì)內(nèi)容，更多關(guān)于Vue之事件處理的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: