我的 Vue.js 學習日記 （七） – 事件與修飾符

Robi發表於2018-05-09
Vue.js事件

上節回顧

上節寫了一個v-for與table的簡單互動，腦子裡回憶一下，嗯 ~ 還是回去再看一遍吧…

本節目標

今天看一下事件與修飾符，並且把有疑惑的地方敲一遍，親眼看一下輸出結果。由於時間有限，今天只寫了prevent stop capture exact once這五個修飾符。

事件

事件就不多說了，v-on: 簡寫 @ 。

修飾符

prevent – 阻止表單提交

<form @submit.prevent>
  <input type="email" placeholder="Email">
  <button type="submit" class="btn btn-default btn-sm" >submit</button>
</form>

<form>
  <input type="email" placeholder="Email">
  <button type="submit" class="btn btn-default  btn-sm" >submit</button>
</form>

tip:prevent修飾符與form標籤一起使用

stop – 阻止事件向“上”傳播

<div @keydown.enter="doSomeThing(1)">
  <div @keydown.enter.stop="doSomeThing(2)">
    <input type="text" @keydown.enter="doSomeThing(3)">
  </div>
</div>

<div @keydown.enter="doSomeThing(1)">
  <div @keydown.enter="doSomeThing(2)">
    <input type="text" @keydown.enter="doSomeThing(3)">
  </div>
</div>

tip:對於巢狀的元素，元素同時有的事件會向外進行擴散

capture – 改變事件傳播順序

<div @keydown.enter.capture="doSomeThing(1)">
  <div @keydown.enter.capture="doSomeThing(2)">
    <input type="text" @keydown.enter="doSomeThing(3)">
  </div>
</div>

tip:catpture會在向上傳遞時享有優先執行權，當存在多個capture時，更外層的優先權更高

once – 一次性觸發

<input type="text" @keydown.enter.once="doSomeThing(`我使用了.once`)">

tip:觸發過一次後不可用，當然前提是不重新整理

exact – 取該修飾符之前所有事件和修飾符的與關係

<input type="text" placeholder="按下的鍵中包括Enter鍵" @keydown.enter="doSomeThing(`我被觸發了`)">
<input type="text" placeholder="按下ctrl+enter鍵觸發Alert" @keydown.ctrl.enter.exact="doSomeThing(`我被觸發了`)">
<input type="text" placeholder="單單按下enter鍵觸發Alert" @keydown.enter.exact="doSomeThing(`我被觸發了`)">
<input type="text" placeholder="想睡想睡想睡" @click.ctrl.exact="doSomeThing(`想睡覺`)">

tip:exact修飾符常與系統修飾符和按鍵修飾符配合使用

完整程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>chapter - 7</title>
</head>
<body>
<div id="app">
  <h3>開啟F12  --> Console  頁，觀察輸出結果</h3>
  <h4>$event</h4>
  <input type="text"  v-model="msg" @keydown.enter="doClick(msg, $event)" placeholder="游標放在此處按下Enter鍵">
  <button class="btn btn-default  btn-sm" @click="doClick(msg, $event)">點 - 我</button>

  <h4>prevent修飾符 - 阻止窗體提交</h4>
  <form @submit.prevent>
  <input type="email" placeholder="Email">
  <button type="submit" class="btn btn-default btn-sm" >submit</button>
  </form>

  <h4>沒有阻止窗體提交</h4>
  <form>
  <input type="email" placeholder="Email">
  <button type="submit" class="btn btn-default  btn-sm" >submit</button>
  </form>

  <h4>stop修飾符 - 阻止事件向“上”傳播</h4>
<div @keydown.enter="doSomeThing(1)">
  <div @keydown.enter.stop="doSomeThing(2)">
    <input type="text" @keydown.enter="doSomeThing(3)">
  </div>
</div>

  <h4>沒有阻止事件向“上”傳播</h4>
  <div @keydown.enter="doSomeThing(1)">
    <div @keydown.enter="doSomeThing(2)">
      <input type="text" @keydown.enter="doSomeThing(3)">
    </div>
  </div>

  <h4>capture修飾符 - 改變事件傳播順序</h4>
  <div @keydown.enter.capture="doSomeThing(1)">
    <div @keydown.enter.capture="doSomeThing(2)">
      <input type="text" @keydown.enter="doSomeThing(3)">
    </div>
  </div>
<p>結論：capture會在向上傳遞時享有有限級，存在多個captrue時，外層優先順序高於內層</p>

  <h4>once修飾符 - 一次性觸發</h4>
  <input type="text" @keydown.enter.once="doSomeThing(`我使用了.once`)">

  <h4>self修飾符 - 只有自身“主動被觸發”才執行，“傳播”而來的不觸發</h4>
  <div @click.self="doSomeThing(`我是“外層div”，我被觸發了`)" style="background-color: cornflowerblue; width: 300px; height: 28px;">
    <div @click="doSomeThing(`我是“中間div”，我被觸發了`)" style="background-color: deeppink; width: 200px; height: 28px;">
      <div @click.self="doSomeThing(`我是“內層”input,我被觸發了`)" style="background-color: lightgreen; width: 100px; height: 28px;">
      </div>
    </div>
  </div>

  <h4>系統修飾符與按鍵修飾符與exact修飾符</h4>
  <input type="text" placeholder="按下的鍵中包括Enter鍵" @keydown.enter="doSomeThing(`我被觸發了`)">
  <input type="text" placeholder="按下ctrl+enter鍵觸發Alert" @keydown.ctrl.enter.exact="doSomeThing(`我被觸發了`)">
  <input type="text" placeholder="單單按下enter鍵觸發Alert" @keydown.enter.exact="doSomeThing(`我被觸發了`)">
  <input type="text" placeholder="想睡想睡想睡" @click.ctrl.exact="doSomeThing(`想睡覺`)">
</div>

<script>
  const data = {
    msg: ``
  }

  const methods = {
    doClick (msg, event) {
      console.log(`-->start`)
      console.log(`type : `+event.type)
      console.log(`target : `+event.target)
      console.log(`button : `+event.button )
      console.log(`tip : button 在 firefox 中 0 代表左鍵`)
      console.log(`-->end`)
    },
    onSubmit () {
      alert(`為什麼總覺得自己該做點什麼？`)
    },
    doSomeThing (msg) {
      alert(msg)
    }
  }

  var vm = new Vue({
    el: `#app`,
    data: data,
    methods:methods
  })
</script>
</body>
</html>

小節

困，累，小節跳過…

相關文章