0%

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

vue.js

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

1
2
3
$('.btn').click(function () {
...
});

或是

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

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

1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
8
9
10
11
12
var vm = new Vue({
el: "#app",
data: {
text: "",
newText: "",
},
methods: {
theNewText: function () {
console.log("you click me"); //有正確顯示於 console 中
},
},
});

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

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

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

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

1
2
3
4
5
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 ,便會有此效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 本身,便會產生此效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 指令中加上參數,並在函式中也帶入相關參數值,在點擊按鈕時,就會產生相關事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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 直接加在指令中,變得相當直覺也清楚。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 後才會顯示結果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 實體解析後,便會自動相加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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 修飾詞,會自動刪除資料中前後的空白,但字串中間有空白則無法執行此效果

1
2
3
4
5
6
7
8
9
10
11
12
13
<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