# Vue學習#11 Vue指令集 - 渲染(只能讀)資料
###### tags: `Vue 直播班 - 2022 春季班` `Vue`

## v-text {{}}
<font color=#AD3C86> **效果:** </font>
純文字渲染，將 Vue data 呈現在畫面上

<font color=#AD3C86> **重點**</font>
v-text 渲染的結果會無視標籤內原本的內容

<!-- text: 'hello' -->

<div v-text="text">world!</div>
<!-- 只會印出 hello -->

<div>{{ text }} world!</div>
<!-- 會印出 hello world! -->

**[v-text跟 {{}} 範例](https://codepen.io/binlandz123/pen/YzYBOvd?editors=1010)**

## v-html
<font color=#AD3C86> **效果:** </font>
類似 v-text，將 Vue data 呈現在畫面上

<font color=#AD3C86> **與 v-text 差異**</font>
就像是 `innerText` 跟 `innerHTML` 的差別

<!-- text: '<h1>hello!</h1>'-->

<div v-text="text"></div>
<!-- 畫面會顯示 <h1>hello!</h1> -->

<div v-html="text"></div>
<!-- 畫面會顯示 <h1>大標題並顯示 hello! -->

## v-if v-else v-else-if
<font color=#AD3C86> **效果:** </font>
用像是 if else 的條件判斷方式決定要渲染條件成立的區塊，指令的內容回傳為 true 會產生結構內容
<font color=#AD3C86> **重點:** </font>
1. 當 v-if 的結果為真值時，則會置入該區塊的結構內容
2. v-else, v-else-if 則為 v-if 的延伸運用，會延續著 v-if 的結構後方

**[v-if v-else v-else-if範例](https://codepen.io/binlandz123/pen/KKyNZJL)**

## v-show
<font color=#AD3C86> **效果:** </font> 與 v-if 同樣是用來切換物件的呈現，但兩者有差異
<font color=#AD3C86> **與 v-if 的差異點:** </font>
1. <font color='red' size=5>v-if 會完整移除 DOM 元素</font>，使其從 HTML 結構上消失。當使用此方法切換 Vue 元件時，<font color='red' size=5>元件的生命週期會重新計算</font>
2. v-show 是將物件加上 display: none，讓物件從視覺上不可見

**[v-show範例](https://codepen.io/binlandz123/pen/OJObzYo?editors=1010)**
<font color='red' size=5>請使用開發者工具檢視範例畫面上的「成功、失敗」區塊，可以發現是使用 display: none 的方式隱藏，而不是移除整個 DOM 結構
</font>

### v-if 跟 v-show 怎麼選
1. 當元件的生命週期需要在顯示時重新計算，如果需要就用 v-if ， 不需要就用 v-show
2. 當元件隱藏時，同時需要完整移除 DOM 結構，也可使用 v-if

## v-for

<font color=#AD3C86> **效果:** </font>
一組陣列或物件進行渲染，指令中會使用 (item, key) in array 的語法
item => 陣列元素的別名，名稱可以自己定義
key => 陣列的 index
array => 陣列或是資料的來源
<font color=#AD3C86> **重點:** </font>
1. v-for 的結構為 v-for="(item, key) in array"
2. 無論是陣列、物件都可以使用 v-for
3. 陣列的索引為 0, 1, 2...，物件索引則為屬性名稱

**[v-for 範例](https://codepen.io/binlandz123/pen/XWzpbRj)**

### v-for 的注意事項 - key
v-for 在運作上是採用快速替換的形式，在預設的狀況下，Vue.js 會儘量重覆使用已渲染好的元素，若不設定 key 值，不會重新渲染元素，只會部份更新。
用以下範例來了解 key 的重要性 :

<font size=4>**[v-for有key跟沒有key的差異](https://codepen.io/binlandz123/pen/YzENXxL)**</font>

* 當沒有 key 時，雖然反轉陣列元素會跟著反轉，但是改變元素的順序相對應的 input 卻不會跟著改變，意思就是元素並沒有全部被重新渲染，只有部分更新而已
* 加上 key ，確保每個元素的唯一性，當元素更新，例如改變順序時，有可識別唯一性的 key 來確保重新渲染

### Template
渲染陣列資料卻不方便創造新標籤的時候，可以使用 `<template>` 標籤，此方法即可在產生 DOM 結構時不產生額外的標籤。另外 `<template>` 標籤也同樣可用於 v-for 上

* 可以使用 template 標籤替代原有的 HTML 標籤，而 template 標籤是不會被輸出的

[template範例](https://codepen.io/binlandz123/pen/ZEaLGdK?editors=1010)

### 避免 v-if 和 v-for 用在一起
<font color='red' size=5> v-for 的優先權大於 v-if </font>，因此當兩者皆出現在同一個元素上時，v-if 會隨著 v-for 重覆執行數次
<font color='red' size=5>v-for 的個數範圍判斷條件成立後，才會輪到 v-if 來判斷顯示與否</font>
<font color=#AD3C86> **重點:** </font>盡可能將 v-if 與 v-for 用不同的標籤呈現
<font color=#AD3C86>解決辦法: 加入 template 標籤 將 v-if 或 v-for 其一放入 template 標籤做判斷</font>
[v-if跟v-for範例](https://codepen.io/binlandz123/pen/oNoBbvN)

## v-bind

<font color=#AD3C86> **效果:** </font> 動態地綁定 HTML 屬性，將資料傳遞到元素上

### 動態屬性
* : 是 v-bind 的縮寫
* v-bind 可以使用各種 JS 的表達式
* 可以傳入 data 內的資料
* input 中可以使用 :value 動態屬性傳入 data 內的值或是任何 JS 表達式的結果
* :src 也同樣道理可傳入 data 內的網址來呈現圖片
* v-bind 可以操作任何 html 裡面的標籤

<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
<img :src="'/path/to/images/' + fileName">

[v-bind 動態屬性](https://codepen.io/binlandz123/pen/yLPgeyq)

### v-bind 進行物件的樣式切換
利用 `v-bind` 來改變標籤的 CSS 樣式
* 使用物件或陣列的方式帶入 CSS ， EX: `:class="{ css className : 屬性(true、false)}"`

[v-bind 樣式切換](https://codepen.io/binlandz123/pen/XWVOyOX)
[參考](https://ithelp.ithome.com.tw/articles/10203646)
## v-is

<font color=#AD3C86> **效果:** </font> 可綁定元件，將元件內容顯示在一個區塊或標籤中
ps. 記得加入元件雙引號裡面要加上單引號

<div v-is="'元件名稱'"></div>

### 利用 v-is 跟 input v-model 達成元件動態切換
建立一個變數並用 v-model 綁定，並透過 input 輸入來切換元件名稱，再透過 v-is 來顯示不同元件的內容
[ v-is 動態切換範例](https://codepen.io/binlandz123/pen/zYpRONM?editors=1010)
### 在 table 加入 td 元件，卻顯示在 table 上方
由於原始 html 結構 tbody 裡面就是加入 tr ，雖然元件 template 也是加入 tr 但是寫進去的標籤還是元件名稱，所以渲染的時候還是會把元件寫在 table 外
#### 解決辦法
在 tbody 裡面 加入 tr 標籤，並利用 v-is 加入元件名稱，將元件內容顯示在 tr
ps. 在此提醒元件名稱要加入單引號
[動態標籤實戰範例](https://codepen.io/binlandz123/pen/KKZQKPr?editors=1010)

## 參考
[v-if, v-else, v-else-if, v-show](https://hackmd.io/@hexschool/S1DJeKTdL/%2F9gbXrozPRm2By9AS9YNREg)
[v-for](https://hackmd.io/@hexschool/S1DJeKTdL/%2FKWXW13ewTaq2M_svlEAYXA)
[Vue.js: 列表渲染 v-for](https://cythilya.github.io/2017/04/27/vue-list-rendering/)
[v-bind](https://hackmd.io/@hexschool/S1DJeKTdL/%2FdxbCu6YTTh2q-Z0p1vWSjw)