# 🏅 Day1 - Vue.js 的基礎魔法：v-text、v-html、v-once

## v-text、v-html、v-once
如果要將 Vue Data 呈現於畫面上，主要有以下的方式：

- `{{}}`：使用雙大括號中間可直接插入元件資料或者任何表達式內容來呈現。
- `v-text`：與前者相同，同時可運用在標籤上。
- `v-once`：綁定的標籤僅會輸出一次資料於畫面上，往後的更新將不會再做更動。
- `v-html`：可同時輸出 HTML 結構，在使用上要特別注意：**請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。（XSS 攻擊）**，詳細說明可參考：https://cn.vuejs.org/api/built-in-directives.html#v-html

題目
---
操作 [這個模板](https://codepen.io/yen-kg/pen/RwmQXXe)，執行以下要求（只能修改 HTML 的部分）：

1. 操作 class 名稱為 Q1 的 div 標籤，利用 {{ }} 將對應 data 中的資料帶入 HTML 中進行畫面渲染。

2. 操作 class 名稱為 Q2 的 div 標籤，利用 `v-text` 將 rawHTML 帶入。

3. 操作 class 名稱為 Q3 的 div 標籤，利用 `v-html` 將 rawHTML 帶入。

4. 操作 class 名稱為 Q4 的 div 標籤，加入 `v-once`。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
<template>
<div id="app">
<div class="Q1">
Ray 身上有 {{ RayMoney }} 元，去超商吃午餐花了 {{ lunchPrice }} 元，買了一杯飲料花了 {{ drinkPrice }} 元
</div>

<div class="Q2" v-text="rawHTML"></div>

<div class="Q3" v-html="rawHTML"></div>

<div class="Q4" v-once>此欄位為單次綁定 {{ lunchPrice }}</div>
</div>
</template>
-->

回報區
---

| # | Discord | CodePen / 答案 |
|:---:|:-------------:|:----------------------------------------------------------------:|
| 01 | kat | [Codepen](https://codepen.io/Nek0u0/pen/qEORvYx) |
| 02 | 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/OPyWqvG) |
| 03 | water | [Codepen](https://codepen.io/wateruby/pen/ZYbLPZK) |
| 04 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/jEbyJWg) |
| 05 | YC | [Codepen](https://codepen.io/yichieh10002/pen/qEORwEM) |
| 06 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/LEpxvZX) |
| 07 | 7lun | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/KwdaYxy) |
| 08 | 小羊 | [Codepen](https://codepen.io/allen9630308/pen/RNWKOXa) |
| 09 | Gui | [CodePen](https://codepen.io/guitimliu/pen/RNWKmMg) |
| 10 | DaRon | [CodePen](https://codepen.io/daron0811/pen/wBKgLBQ) |
| 11 | 雪粒 | [CodePen](https://codepen.io/bzykdfhw-the-bashful/pen/Byopgga) |
| 12 | Loder | [CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/PwPWMWq) |
| 13 | haohaoliao | [Codepen](https://codepen.io/yuyuyuhaohao/pen/LEpWPzG) |
| 14 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/WbQpeJg) |
| 15 | yu005620 | [Codepen](https://codepen.io/yu-chin-chiang/pen/qEOrBEr) |
| 16 | haojing | [Codepen](https://codepen.io/hjxu/pen/zxvZYqB) |
| 17 | dean | [Codepen](https://codepen.io/ch933114/pen/vENxEJo) |
| 18 | dPi | [Codepen](https://codepen.io/snijqlte-the-bold/pen/Qwjpwmv) |
| 19 | 蜜桃果茶 | [Codepen](https://codepen.io/jia-yiii/pen/azvJOwo) |
| 20 | Lin | [Codepen](https://codepen.io/Lin4611/pen/raOyVoN) |
| 21 | rio_wei | [Codepen](https://codepen.io/wei_wu/pen/xbwqGoO) |
| 22 | wei | [Codepen](https://codepen.io/weipened/pen/pvjeJOY) |
| 23 | 阿昌 | [Codepen](https://codepen.io/ychleo102615/pen/myeWePL) |
| 23 | Sam | [Codepen](https://codepen.io/Sammy-the-styleful/pen/NPGpGvZ) |
| 24 | 阿鵝 | [Codepen](https://codepen.io/noracami/pen/bNVqERe) |
| 25 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/xbwqEpy) |
| 26 | poyi | [Codepen](https://codepen.io/poyi-the-flexboxer/pen/ZYbeOqB) |
| 27 | David0799 | [Codepen](https://codepen.io/David0799/pen/JoYWbvY) |
| 28 | 牙山 | [Codepen](https://codepen.io/Tzuru-Chen/pen/pvjeRyM) |
| 29 | 鼠鼠 | [Codepen](https://codepen.io/elim85223/pen/azvJwbN) |
| 30 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/gONLJKR) |
| 31 | thchen2002 | [Codepen](https://codepen.io/thchen2002/pen/myeWBNq) |
| 32 | Candace | [Codepen](https://codepen.io/Candace802/pen/raOypzp) |
| 33 | Clarence | [Codepen](https://codepen.io/Clarence-Lin/pen/raOyvvd) |
| 33 | Oria | [Codepen](https://codepen.io/kajing/pen/ZYbeVgo) |
| 34 | bonnieli1414 | [Codepen](https://codepen.io/bonnieli1414/pen/vENxbEO) |
| 35 | emmayo | [Codepen](https://codepen.io/emmayo/pen/yyYMrya) |
| 36 | DY | [Codepen](https://codepen.io/dorihung/pen/EaVmxGW) |
| 37 | jimmy | [Codepen](https://codepen.io/JimmyMao/pen/gbaWPOE) |
| 38 | Holly | [Codepen](https://codepen.io/JimmyMao/pen/gbaWPOE) |) |
| 39 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/PwPmzKB) |
| 40 | 阿Q | [Codepen](https://codepen.io/qqyu/pen/WbQjGeN) |
| 41 | 地呱 | [Codepen](https://codepen.io/LHung/pen/NPGjBLJ) |
| 42 | yi | [Codepen](https://codepen.io/5-1/pen/KwdmByL) |
| 43 | Clove_墨 | [Codepen](https://codepen.io/CloveTseng1026/pen/RNWVzOy) |
| 44 | Momoze | [Codepen](https://codepen.io/mleczmam-the-typescripter/pen/WbQOvGp) |
| 45 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/OPygXXz) |
| 46 | wanghuaiying | [Codepen](https://codepen.io/huaiying/pen/YPyQWNZ) |
| 47 | 阿kai | [Codepen](https://codepen.io/kaihuang3013/pen/bNVRwvG) |
| 48 | teresa | [Codepen](https://codepen.io/teresa150029/pen/raOwWbP) |
| 49 | Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/MYaoOmx) |
| 50 | Rexlin| [Codepen](https://codepen.io/Rexlin595/pen/PwPKBBJ) |
| 51 | Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/dPYzrrO) |
| 52 | Sam.S.T.Y | [Codepen](https://codepen.io/Sam-Yang-the-animator/pen/qEOXGbY) |
| 53 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/MYavdEo) |
| 54 | 肉桂卷 | [Codepen](https://codepen.io/ginnlee/pen/EaVwOdz) |
| 55 | 禹成林 | [Codepen](https://codepen.io/useirin/pen/LEpOeJx) |
| 56 | 邵 | [Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/RNWQNXg) |
| 57 | ScarT | [Codepen](https://codepen.io/Acadia/pen/GgpQdKJ) |
| 58 | 豆子 | [Codepen](https://codepen.io/Beanhuang/pen/KwdoWvy) |
| 59 | 白雪 | [Codepen](https://codepen.io/weiwei032835-the-styleful/pen/YPyLPBP) |
| 60 | Chen | [Codepen](https://codepen.io/JGM-C/pen/gbaKRme) |
| 61 | Toung | [Codepen](https://codepen.io/Toung/pen/bNVxMjP) |
| 62 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/raxBLWQ) |
<!--
| 排序 | Discord | [Codepen]() |
-->