Eugene's Blog
0%

[Vue]Vue基本語法

發表於 更新於 分類於 閱讀次數：
4.5k 8 分鐘

前情提要

前兩篇的基本設置教學，筆者相信大家已學會基本設定並撰寫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做得到哪些東西，等於是大標題要記得，實際撰寫時忘記了的話再查官網的範例即可，筆者寫此篇目的也是如此，希望也有幫助到你，下篇再見。

相關文章