Vue 筆記 - 使用 v-on 處理互動式行為

傳統在寫 JS 或是 jQuery 的時候，要綁定 DOM 來控制，假設要綁定在按鈕上的事件，就要寫成：

1
2
3

$('.btn').click(function () {
 ...
 });

或是

1
2
3

$('.btn').on(click, function () {
 ...
 })

在 vue 中會直接寫在 html 上，並且在 vue 的程式碼中新增一個 methods 方法來對應 v-on 事件，vue 的原始碼中都是用物件來呈現資料，所以 methods 也要是物件。

var vm = new Vue({
     el: '#app',
     data: {
       text: '',
       newText: '',
     },
     methods: {
       ...
     },
   });

在 methods 中新增的方法名稱要對應在 v-on 的事件名稱中，登打方式如下方程式碼，並透過 console.log 檢查是否有正確產生事件。

html

1	<button type="button" v-on:click="theNewText">click</button>

javascript

var vm = new Vue({
  el: "#app",
  data: {
    text: "",
    newText: "",
  },
  methods: {
    theNewText: function () {
      console.log("you click me"); //有正確顯示於 console 中
    },
  },
});

倘若我今天要在 input 輸入文字，並且點擊按鈕產生事件，可以使用 this.text 指向 text 本身。

在 vue 中已經將 this 定義為資料本身。

methods: {
theNewText: function () {
console.log('this.text'); //點擊按鈕後會顯示 this.text
  }
},

如果要將 input 中輸入的文字輸出到，可以這樣寫：

methods: {
  theNewText: function () {
  this.newText = this.text;
  }
},

縮寫

v-on 的縮寫為 @，所以像是這裡的事件就可以寫成： @click="theNewText"

v-on 結合修飾詞 (Modifiers) 將可以使用更多事件操作

修飾詞是用來增強指令附加功能的語法糖， vue 的修飾詞分兩種:表單元素與事件的修飾詞。使用方式為 v-XXX 後面加上 .xxx。ex: v-on:click.prevent

stop-相當於 event.stopPropagation()。
prevent-相當於 event.preventDefault()。
capture - 添加事件偵聽器時使用 capture 模式。(很少用)
self - 當事件是從偵聽器綁定的元素本身觸發時才觸發。
keyCode- 當事件是從特定鍵觸發時才觸發。
native - 監聽組件根元素的原生事件。
once - 只觸發一次。
left - (2.2.0) 當點擊鼠標左鍵時觸發。
right - (2.2.0) 當點擊鼠標右鍵時觸發。
middle - (2.2.0) 當點擊鼠標中鍵時觸發。
passive- (2.3.0)以{ passive: true }模式添加偵聽器 (沒用過)

從 2.4.0 開始，v-on 同樣支持不帶參數綁定一個事件/監聽器鍵值對的對象。注意當使用對象語法時，是不支持任何修飾器的。

按鍵修飾詞

常用的還有一個是按鍵修飾符，其中一個很好用的就是 enter，顧名思義就是按下 enter 鍵時，就能把資料送出。

程式碼可以這樣寫： @keyup.enter="theNewText"

Codepen: https://codepen.io/hnzxewqw/pen/XWmRvrW

v-on 指令練習

在指令中輸入方法，點擊按鈕會 count 會自動往上加 1

在 button 綁定 v-on 指令，並寫入加總為 1 (+=1)，在 vue 實體中的 data 中加上同步綁定的 counter ，便會有此效果。

<div id="app">
  <button @click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

<script>
  var example1 = new Vue({
    el: "#app",
    data: {
      counter: 0,
    },
  });
</script>

在 vue 實體中加入 methods ，點擊按鈕會自動往上加 1

如上方所說，v-on 會加上對應的 methods，這邊範例是在 button 上加上 v-on 指令，並在 vue 實體中加上 methods，並把指令的名稱當作一個 function 放入 methods 之中，大括弧內要寫入與function 一樣的名稱，this 指的是 counter 本身，便會產生此效果。

<div id="app">
  <button @click="add">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      counter: 0,
    },
    methods: {
      add: function () {
        this.counter++;
      },
    },
  });
</script>

codepen: https://codepen.io/hnzxewqw/pen/MWamNyN

在 vue 實體中加入 methods ，帶入參數點擊按鈕時會依照參數數字往上加總

除了上方兩種基本方法外，也可以在 v-on 指令中加上參數，並在函式中也帶入相關參數值，在點擊按鈕時，就會產生相關事件。

<div id="app">
  <button @click="add(1, $event)">Add 1</button>
  <button @click="add(2, $event)">Add 2</button>
  <button @click="add(3)">Add 3</button>
  <button @click="add(4)">Add 4</button>
  <button @click="add(5)">Add 5</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      counter: 0,
    },
    methods: {
      add: function (val, ev) {
        this.counter += val;
      },
    },
  });
</script>

Codepen: https://codepen.io/hnzxewqw/pen/KKdmOmj

修飾詞練習

prevent: 使其原本屬性取消

上方有提到修飾詞，這邊使用 prevent 修飾詞，使 a 連結取消原本屬性。這方法跟在 jQuery 中使用的 preventDefault 功能相同，但 vue 直接加在指令中，變得相當直覺也清楚。

<div id="app">
  <a href="https://www.facebook.com/" @click.prevent="link"
    >原本點擊後會跳轉到 Facebook</a
  >
</div>

<script>
  var vm = new Vue({
    el: "#app",
    methods: {
      link: function (e) {
        // e => event
        // e.preventDefault();
        alert("我取消了連結功能");
      },
    },
  });
</script>

Codepen: https://codepen.io/hnzxewqw/pen/QWjveme

lazy: 相較於 JS 原生的 blur 語法，離開 input 後才會顯示結果

<div id="app">
  <p>lazy 效果: 輸入資料後，離開 input 後才會顯示結果</p>
  <input type="text" v-model.lazy="msg" />
  <div>msg: {{ msg }}</div>
</div>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      msg: "hello",
    },
  });
</script>

number: 使輸入的數字自動轉為數字格式

下方有兩個表格，透過 number 修飾詞，可以自動轉成數字，透過 vue 實體解析後，便會自動相加。

<div id="app">
  <div>
    <input type="text" v-model.number="num1" /> +
    <input type="text" v-model.number="num2" /> = {{ sum }}
  </div>
</div>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      num1: 0,
      num2: 0,
    },
    computed: {
      sum() {
        return this.num1 + this.num2;
      },
    },
  });
</script>

Codepen: https://codepen.io/hnzxewqw/pen/ZEbKgVO

trim: 自動取消資料前後的空格

透過 trim 修飾詞，會自動刪除資料中前後的空白，但字串中間有空白則無法執行此效果

<div id="app">
  <input type="text" v-model.trim="msg" />
  <div>msg: {{ msg }}</div>
</div>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      msg: "Hello",
    },
  });
</script>

Codepen: https://codepen.io/hnzxewqw/pen/BaoRXEe

參考資料

Vue 官網 - 指令 v-on