第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

此間少年_ · 更新于 2020-11-27

1. 前言

本小節(jié)我們介紹 Vue 中如何進行事件處理。在章節(jié) 2.2 中我們已經介紹了指令 v-on，本章節(jié)我們將詳細介紹在 v-on 的一些用法。包括如何傳遞參數(shù)、如何使用事件修飾符等。其中，事件修飾符是本章節(jié)的難點。事件修飾符很多，同學們不需要一下子都記住，只要學會如何使用它，在開發(fā)過程中如果有所遺忘，可以通過翻看文檔來使用。

2. 慕課解釋

可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼。 — 官方定義

使用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼。

3. 基本使用

3.1 監(jiān)聽點擊事件，并在觸發(fā)時運行一些 JavaScript 代碼

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>商品數(shù)量 {{count}}</div>
      <button v-on:click="count = count + 1"> 加一個 </button>
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 0
      },
    })
  </script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
在 html 第 3 行，我們使用 v-on 指令給 button 元素綁定來一個 click 事件，并在點擊的時候執(zhí)行 count + 1 的操作。

3.2 通過 methods 實現(xiàn)事件函數(shù)綁定

在上面的例子中，我們把事件處理函數(shù)直接寫在模板中，然而許多事件處理的邏輯都很復雜，所以直接把JS代碼寫在 v-on 指令中有時并不可行，v-on 指令可以接收一個定義的方法來調用。示例如下：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>商品數(shù)量 {{count}}</div>
      <button v-on:click="add"> 加一個 </button>
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        add() {
          this.count = this.count + 1
        }
      }
    })
  </script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
在 html 第 3 行，我們使用 v-on 指令給 button 元素綁定來一個 click 事件，并在點擊的時候執(zhí)行 add 方法。
在 JS 代碼第 9-11 行，我們定義了方法 add；觸發(fā)該方法時給 count + 1。

3.3 給事件傳遞參數(shù)

有時候我們需要在事件觸發(fā)的時候傳遞一些參數(shù)，

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>商品數(shù)量 {{count}}</div>
      <button v-on:click="setCount(10)"> 設置為 10 個 </button>
      <button v-on:click="setCount(0)"> 設置為 0 個 </button>
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        setCount(count, event) {
          this.count = count
        }
      }
    })
  </script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
在 html 第 3 行，我們使用 v-on 指令給 button 元素綁定了一個 click 事件，并在點擊的時候執(zhí)行 add 方法。
在 JS 代碼第 9-11 行，我們定義了方法 add；觸發(fā)該方法時給 count + 1。

3.4 獲取原生 DOM 事件

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

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>商品數(shù)量 {{count}}</div>
      <button v-on:click="setCount(10, $event)"> 設置為 10 個 </button>
      <button v-on:click="setCount(0, $event)"> 設置為 0 個 </button>
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        setCount(count, event) {
          this.count = count
          console.log(event)
        }
      }
    })
  </script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
在上述 JS 代碼第 9-12 行，我們定義了事件函數(shù) setCount。 在按鈕點擊事件中，我們將 $event 對象傳遞給函數(shù)，因此，在函數(shù) setCount 中可以訪問到原生事件對象。

4. 事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現(xiàn)這點，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細節(jié)。為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。實現(xiàn)方法就是在事件名稱后面以后綴的形式添加指定的修飾符。

知識擴展：
event.preventDefault() 用來取消事件的默認動作。
event.stopPropagation() 用來阻止事件冒泡到父元素，阻止任何父事件處理程序被執(zhí)行。

Vue 提供了以下事件修飾符：

  1. .stop: 阻止單擊事件繼續(xù)傳播；
  2. .prevent: 只有修飾符，提交事件不再重載頁面；
  3. .capture: 添加事件監(jiān)聽器時使用事件捕獲模式，即元素自身觸發(fā)的事件先在自身處理，然后交由內部元素進行處理；
  4. .self: 只有在event.target是當前元素自身時觸發(fā)處理函數(shù)，即事件不是從內部元素觸發(fā)的；
  5. .once: 點擊事件將只觸發(fā)一次;
  6. .passive: 滾動事件會立即觸發(fā)，不會等待其他串聯(lián)事件。即prevent會失效。
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發(fā)的事件先在此處理，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

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

接下來，我們用一個完整的示例來看下這些修飾符的使用方法。

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <style>
    .container{
      height: 400px;
      overflow-x: auto;
      flex: 1;
    }
    .container div{
      height: 20px;
    }
  </style>
  <body>
    <div id="app">
      <!-- stop 案例 -->
      <div @click="clickTargetContainer">
        <button @click.stop="clickTargetA">點我 stop 案例</button>
        <button @click="clickTargetA">點我 無 stop 修飾</button>
      </div>

      <!-- submit.prevent 案例 -->
      <form method="get" action="/" @submit.prevent="submit">
        <button type="submit">點我提交表單</button>
      </form>

      <form method="get" action="https://www.baidu.com" @submit="submit">
        <button type="submit">點我提交表單</button>
      </form>

      <!-- capture 案例 -->
      <div v-on:click.capture="capture">
        <button @click.stop="clickTargetA">點我 capture 案例</button>
      </div>

      <!-- self 案例 -->
      <div @click.self="clickTargetContainer" style="padding: 20px;border: 1px solid #cccccc;">
        <button @click="clickTargetA">點我 self 案例</button>
      </div>

      <!-- once 案例 -->
      <div>
        <button @click.once="clickTargetA">點我 once 案例</button>
      </div>

    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: {
        clickTargetContainer() {
          alert('父級容器點擊事件觸發(fā)')
        },
        clickTargetA() {
          alert('按鈕標簽點擊事件觸發(fā)')
        },
        submit() {
          alert('提交表單了')
        },
        capture() {
          alert('雖然你點擊的是內部元素，但是我先觸發(fā)！')
        }
      }
    })
  </script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
代碼第 4-7 行，stop 案例中，當我們給按鈕 click 事件添加 .stop 修飾符之后，點擊按鈕，事件不會向上傳遞。
代碼第 10-16 行，submit.prevent 案例中，當給 submit 事件添加 .prevent 修飾符之后，提交事件不再重載頁面。
代碼第 19-21 行，capture 案例中，我們給父容器添加了 capture 事件，當點擊按鈕的時候，會先觸發(fā) capture 中的事件函數(shù)，然后再觸發(fā)按鈕綁定的點擊事件。
代碼第 24-26 行，self 案例中，我們給父容器的點擊事件添加了 .self 的修飾符，所以只有點擊父容器的時候才會觸發(fā)該方法，當點擊按鈕的時候并不會觸發(fā)父容器綁定的事件。
代碼第 29-31 行，once 案例中，我們給按鈕的點擊事件添加了 .once 的修飾符，所以只有首次點擊按鈕的時候會觸發(fā)事件函數(shù)，再次點擊之后將不會觸發(fā)事件函數(shù)。

5. 按鍵修飾符

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

<!-- 只有在 `key` 是 `Enter` 時調用 `login()` -->
<input v-on:keyup.enter="login">

<!-- 也可以使用 keyCode -->
<input v-on:keyup.13="login">

為了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數(shù)常用的按鍵碼的別名：

  1. .enter: 回車鍵；
  2. .tab: TAB鍵；
  3. .delete: 刪除和退格鍵；
  4. .esc: 只有在event.終止鍵；
  5. .space: 刪除鍵；
  6. .up: 上方向鍵：
  7. .down: 下方向鍵：
  8. .left: 左方向鍵：
  9. .right: 右方向鍵：

6. 系統(tǒng)修飾鍵

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

  1. .ctrl:
  2. .alt:
  3. .shift:
  4. .meta:

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

例如：

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

Vue提供了.exact修飾符，實現(xiàn)單獨的系統(tǒng)按鍵的事件。

例如：

<!-- 即使 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>

7. 小結

本節(jié)，我們帶大家學習了事件處理。主要知識點有以下幾點：

  • 如何定義事件函數(shù)，如何給事件函數(shù)傳遞參數(shù)；
  • 通過特殊參數(shù) $event 獲取原生 DOM 事件；
  • 事件修飾符的使用；
  • 按鍵修飾符的使用；
  • 系統(tǒng)修飾鍵的使用。