最近被上級塞了一堆很趕的專案, 上禮拜就算硬擠也擠不出時間...
只好這禮拜趁連假來補稿, 充實一下連假的生活, 來個端午連假每日一篇計畫

#Vue指令

趁天氣好, 腦袋清晰的時候, 趕緊來把基本觀念複習完畢吧~

首先我們可以看到Vue官網指令的部分
哇夭壽 指令有一大堆

雖然有這麼多個指令, 但絕大部分是原生js就有的東西, 只是換個寫法, 待我娓娓道來

#v-text

v-text用途很簡單是最好理解的一個指令, 意義就如他的指令名稱一樣, 是讓元素帶入指定的文字呈現, 用途類似原生js的textContent
舉上次來亂的例子來說:

var app = new Vue({
    el: '.app',
    data: {
        message: 'Hello 我是來亂的!'
    }
})

// 雙花括號寫法如下
<div class="app">
    {{ message }}
</div>

// 上下兩種寫法得到的結果相同

// v-text寫法如下
<div class="app" v-text="message"></div>

#v-html

v-html跟v-text在我的理解上是一樣的, 差別在v-html可以放html語法
但是!!!
它只能放單純的html, 沒辦法綁定Vue元件的資料
例如:

var app = new Vue({
    el: '.app',
    data: {
        message: 'Hello 我是來亂的!',
        myhtml: '<span>{{ message }}</div>'
    }
})

<div class="app" v-html="myhtml"></div>

最後呈現的結果會長這樣:

#v-show

v-show用途如其名, 判斷元素是否顯示, 我個人常把這個指令用在與CSS動畫的搭配上
既然說是判斷, 就知道它的內容必須放布林值(true/false)
寫法會像這樣:

// v-show判斷message是否有值, 有值就顯示, 沒值就隱藏
<div class="app" v-text="message" v-show="message"></div>

這邊要注意的是, 它不是判斷渲染或不渲染, 而是顯示或隱藏, 代表一開始就會把元素渲染出來了!!

#v-if、v-else-if、v-else

這三個指令, 它的用途和v-show也類似, 不過是判斷元素是否渲染
注意是渲染唷!!!
是渲染唷!!!
渲染唷!!!
這邊的v-if判斷跟所有程式語言的if判斷式是一樣的概念, 條件達成就渲染, 沒達成就跳下一個判斷
舉個簡單的例子:

var app = new Vue({
    el: '.app',
    data: {
        shownumber: 1,
        message1: "shownumber 是1",
        message2: "shownumber 是2",
        message3: "shownumber 不是1也不是2",
    }
})

// shownumber為1時渲染message1
// shownumber為2時渲染message2
// 都不是則渲染message3
<div v-text="message1" v-if="shownumber === 1"></div>
<div v-text="message2" v-else-if="shownumber === 2"></div>
<div v-text="message3" v-else></div>

#v-for

看到for就知道要跑迴圈了
v-for也是和所有程式語言的for迴圈是一樣的概念
用法如下:

<div v-for="(item,index) in 10" v-bind:key="index">{{ item }}</div>

這邊會發現 v-for迴圈帶了兩個參數

• item: 每一個項目
• index: 項目對應的索引值

最後把 item 用雙花括號顯示出來會長這樣

在最後v-for範例中有用到一個還沒提到的指令v-bind, 後面帶了key
這部分, 下次會再說明, 祝大家端午連假愉快

PS.今天真是熱爆天