0%

[Vue]Vue基本語法

前情提要

前兩篇的基本設置教學,筆者相信大家已學會基本設定並撰寫vue application,此篇介紹基本語法及應用並說明。

此篇雖然想以Vue官網教學順序做介紹,但筆者認為已學會某種技術,應該是要以自己角度分類並介紹,且要加上經驗分享,還可藉由驗證自己的不足,因此若不習慣內容編排方式,多加見諒。

簡單介紹一下筆者接下來會使用的環境如下:

內容

Mustache語法

我們就從Mustache語法開始說起,我們資料綁定顯示時需使用Mustache語法,以兩個大刮號包起參數名稱。

  • Html部份
    1
    <span>Message: {{ msg }}</span>
  • Javascript部份
    1
    2
    3
    4
    5
    6
    7
    export default{
    data(){
    return {
    msg: "Hello World"
    }
    }
    }
  • 效果如下
    Hello World

v-bind

介紹語法

若想要動態設定html控制項屬性,則無法使用Mustache語法,需使用v-bind關鍵字,套用如下:

1
<div v-bind:id="dynamicId"></div>

我們會在data區塊綁定其dynamicId的值,再透過v-binddirective可以動態設定id值。再舉一個簡單例子,我們在頁面上表單會有下拉式選單,我們會透過呼叫API取得source後,render於下拉式選單元件上,這時也是得透過v-bind來綁定,範例如下:

1
2
3
4
5
6
7
<select class="form-control">
<option value=""></option>
<option v-bind:value="item.value"
v-for="item in selectedOptions">
{{item.text}}
</option>
</select>

以上範例,使用v-bind指定其option的value值
v-for可以先行忽略,下篇會有詳細的說明

針對v-binddirective,我們可以簡寫為:表示。

  • 原始
    1
    <div v-bind:id="dynamicId"></div>
  • 簡寫後
    1
    <div :id="dynamicId"></div>

    簡寫後版面乾淨許多,不過這個完全看個人的習慣,沒有好壞對錯之分

v-bind基本上對於任何html屬性皆可動態綁定,官網針對class與style綁定有特別說明,筆者就不再多加敘述,請參考class與style綁定章節。

v-on

介紹語法

任何Html原生事件event皆可透過v-on做監聽,最簡單例子就是

  • Html部份
    1
    <button v-on:click="someMethod()">按我觸發click事件</button>
  • Javascript部份
    1
    2
    3
    4
    5
    6
    7
    8
    9
    export default({
    name: 'MyComponent',
    data(){return{}},
    methods:{
    someMethod: function(){
    alert('Click Event Trigger!!')
    }
    }
    })
  • 效果如下

針對v-ondirective,我們可以簡寫為@表示。

  • 原始
    1
    <button v-on:click="someMethod()">按我觸發click事件</button>
  • 簡寫後
    1
    <button @click="someMethod()">按我觸發click事件</button>

$event參數

我們就以上面的@click例子來看看,function中傳入$event參數,看他到底是為何物?筆者就改寫一下呼叫的method中加入$event參數

  • html部份
1
<button click='someMethod($event)'>點我看$event</button>
  • javascript部份(僅貼出methods options區塊)
1
2
3
4
5
methods: {
someMethod: function(event){
console.log(event);
}
}

我們來看一下印出來的結果吧

以上,event的資料,做進一步的判斷及處理是很夠的,但vue本身也有提供一些常見的處理包裝而成的修飾符,我們就來看下一節的介紹。

event modifiers(修飾符)

若有撰寫過jquery,應該對於preventDefault()不陌生才對,等於html原生觸發的事件先行濾掉,只執行自行撰寫的處理邏輯,vue這邊提供相對應的修飾符可套用於v-on

1
<a v-on:click.prevent="doThis"></a>

目前提供的修飾符有

  • stop
  • prevent
  • capture
  • self
  • oncevue2.1.4以後版本才有
  • passivevue2.3.0以後版本才有

官網的範例就已經滿清楚的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form v-on:submit.prevent></form>

<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

key modifires(修飾符)

顧名思義,在監聽keyup事件時,可加修飾符,更精確的指定是哪一個按鍵,vue提供已包裝好常見的如下

  • enter
  • tab
  • delete delete鍵和backspace鍵皆會觸發
  • esc
  • space
  • up
  • down
  • left
  • right

這邊vue提供一個擴充點,若我們想監聽的按鍵不在上面列的裡面,全域的設定按鍵對應的keycode

1
2
// enable `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

以上的設定後,我們在頁面上使用v-on:keyup.f1的方式監聽keycode為112的F1按鍵事件。若想知道哪些按鍵的對應keycode,可以玩一下這個網站 keycode.info,滿有趣的。想要直接看完整的對應資訊,可以參考這個mozilla提供的keycode列表

若不想自行定義,vue在2.5.0版本後提供自動對應keycode,意即會將

1
<input @keyup.page-down="onPageDown">

vue會很聰明的幫你轉換成$event.key === 'PageDown',但是要記得不包含那種有爭議性的按鍵,例如在IE9環境中很多keycode,如esc及其他箭頭按鍵會與其他瀏覽器環境是不一樣的。這樣筆者會建議以全域的方式自行定義keycode來使用相對保險。還有一些進階的系統按鍵、組合鍵及滑鼠鍵議題,筆者就不在此列出,參考官網介紹

使用javascript表達式

你可以在Mustache語法或其他任何資料綁定方式中寫上javascript運算邏輯。例如:

1
2
3
4
5
6
7
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

基於程式閱讀及擴充性,筆者建議盡量少使用這種內嵌式javascript運算邏輯,盡量使用methods/computed/watch等來取代,應該把javascript邏輯寫在script區塊中

結論

以上,主要是介紹了Mustache語法 、透過v-bindhtml屬性值動態生成及使用v-on監聽html原生事件。或許單學這些語法會覺得無趣,且第一次看的話應該也不會有特別的感覺,筆者建議是要記住vue做得到哪些東西,等於是大標題要記得,實際撰寫時忘記了的話再查官網的範例即可,筆者寫此篇目的也是如此,希望也有幫助到你,下篇再見。