# 🏅 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 / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/dyBeRRO) |
| Zhu | [CodePen](https://codepen.io/codepenplayer/pen/YzopbXP) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/BagQeBQ) |
|HsienLu|[Codepen](https://codepen.io/Hsienlu/pen/wvLobYy)|
| ya_meow |[codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/gONLJKR)|
|阿鵝|[CodePen](https://codepen.io/noracami/pen/LYKbovZ)|mi/pen/LYKbovZ)|
|Mars|[CodePen](https://codepen.io/MarsKuo/pen/vYqyqBZ)|
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/MWMbMoW) |
| RayChen1996 | [CodePen](https://codepen.io/raychen1996/pen/poXNmaO) |
| Shin | [CodePen](https://codepen.io/shin9626/pen/PorbMew)|
| CoCo | [CodePen](https://codepen.io/hwizfgdr-the-sasster/pen/XWLNvgz)|
| anderson666 | [CodePen](https://codepen.io/goodmanbuild/pen/oNrBvoX)|
| Tanyaaaa | [CodePen](https://codepen.io/tanya77777/pen/ZEdBgxX)|
| rjjq | [CodePen](https://codepen.io/rjjq/pen/poXRvjb)|
| Rumi | [CodePen](https://codepen.io/Tzuru-Chen/pen/wvLgarq)|
|神奇海螺|[CodePen](https://codepen.io/ksz54213/pen/BagpoPM)|
|Mika | [CodePen](https://codepen.io/codepenplayer/pen/YzopbXP)|
| 睿睿 | [CodePen](https://codepen.io/uwmrsusb-the-solid/pen/wvLgGwo)|
| YO | [CodePen](https://codepen.io/Y-1717/pen/MWMJyQP)|
| ABOOS | [CodePen](https://codepen.io/guhungyin/pen/KKjazGx)|
| 咖咖 | [CodePen](https://codepen.io/gon790219/pen/oNrBxQb)|
| cbs |[Codepen](https://codepen.io/wasdjk/pen/KKjaMXj)|
| kuolun |[Codepen](https://codepen.io/kuolun/pen/LYKxyxw)|
| n913239 | [Codepen](https://codepen.io/n913239/pen/mdZRmxO) |
| Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/yLdgbdZ) |
| Ariel | [Codepen](https://codepen.io/ariel0510/pen/rNEjzyw) |
| CWT | [Codepen](https://codepen.io/ttfunqgb-the-vuer/pen/XWLpeXP) |
| Jay | [Codepen](https://codepen.io/yeeyaha-jay/pen/xxogLaJ)|
| 貢波波夫 | [Codepen](https://codepen.io/yen-kg/pen/RwmQXXe) |
| Charis_Lai | [Codepen](https://codepen.io/charislai/pen/bGPgoKY)|
| 艾芮絲 | [Codepen](https://codepen.io/wangyingju/pen/zYVNPvY)|
| Tatsu | [Codepen](https://codepen.io/chindesu0207/pen/WNqRXGY)|
| yuling | [Codepen](https://codepen.io/igzdflpu/pen/rNEjJLr)|
| zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/JjQELvE) |
| bad-527boy | [Codepen](https://codepen.io/bad-527boy/pen/bGPgvmZ) |
| 蛋黃 |[Codepen](https://codepen.io/yiyun12o9/pen/vYqgrVK)
| Zhen |[Codepen](https://codepen.io/yunnnz/pen/xxogzMK)
| 好了啦 |[Codepen](https://codepen.io/j-z-the-flexboxer/pen/LYKxBpZ)
| Barry1104 |[Codepen](https://codepen.io/barry1104/pen/mdZRvvR)
| m.m |[Codepen](https://codepen.io/meggie-liu/pen/oNrBKPa)
| Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/OJeWKZL) |
| imsmallnew | [Codepen](https://codepen.io/imsmallnew/pen/zYVZOBJ) |
| Letitia | [Codepen](https://codepen.io/letitia-chiu/pen/WNqpNOa) |
| 末次 | [Codepen](https://codepen.io/yunjulee/pen/KKjWVad) |
| mu mu | [CodePen](https://codepen.io/ishuki916/pen/dyBvNbG) |
| cherylxie | [CodePen](https://codepen.io/fi7933201/pen/QWXGRYV) |
| Aden | [CodePen](https://codepen.io/Osases/pen/MWMpJod) |
| chichi | [CodePen](https://codepen.io/chichihuang/pen/BagWpMq) |
| Tough life | [CodePen](https://codepen.io/hakuei0115/pen/ZEdeKGa) |
| 阿B|[CodePen](https://codepen.io/Abby-Chou/pen/mdZWwEm) |
| KK | [CodePen](https://reurl.cc/1boRnD) |
| 小葉 | [CodePen](https://codepen.io/rsosijvr-the-flexboxer/pen/mdZWaEj) |
| Aya | [Codepen](https://codepen.io/NoNameNote/pen/ZEdewwj) |
| Kevin Wei | [Codepen](https://codepen.io/kevin21305991/pen/bGPqPRv) |
| Eric0823 | [Codepen](https://codepen.io/a7901477/pen/VwJbjdP) |
| Mina | [Codepen](https://codepen.io/yanling-99/pen/GRbmNGJ) |
| anthy7154 | [Codepen](https://codepen.io/hnhmgzbw-the-sans/pen/vYqmxzz) |
| Leor | [Codepen](https://codepen.io/Leor-the-builder/pen/LYKyWam) |
| SKey | [Codepen](https://codepen.io/Dale-Chien/pen/yLdbPaq) |
| Abby | [Codepen](https://codepen.io/abby1125/pen/bGPWYqY) |
| willy0719 | [Codepen](https://codepen.io/DOBEST/pen/BagRYqz) |
| duchi | [Codepen](https://codepen.io/sqaz0502/pen/PormRZW) |
| dodo |[Codepen](https://codepen.io/MissDouble/pen/VwJbxPr)|
| ling |[Codepen](https://codepen.io/yen-kg/pen/RwmQXXe)|
| Steven1220 |[Codepen](https://codepen.io/Steven1220/pen/LYKLbyB)|
| sandra191919 |[Codepen](https://codepen.io/a0960529965/pen/wvLeJRO)|
| Chieh |[Codepen](https://codepen.io/Chieh_/pen/ExBXmze)|
| JC |[Codepen](https://codepen.io/jy_123/pen/BagZYma)|
| ErinFeng |[Codepen](https://codepen.io/erin-feng/pen/yLdXQRx)|
| Yuwen |[Codepen](https://codepen.io/Yuwen-the-reactor/pen/yLdXZMJ)|
| 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/LYKLaME) |
| Anna | [Codepen](https://codepen.io/anna971053/pen/YzoQoXm) |
| Renee | [Codepen](https://codepen.io/renee_wu/pen/mdZwZVy) |
| jacky | [Codepen](https://codepen.io/yen-kg/pen/RwmQXXe)
| Cami | [Codepen](https://codepen.io/irisLife/pen/NWZvNRQ) |
| floya9733 | [Codepen](https://codepen.io/TZU68/pen/wvLrzXj) |
| 阿榮 | [Codepen](https://codepen.io/codeitaday/pen/wvLreyW) |
| World | [Codepen](https://codepen.io/HexschoolVuePujols/pen/YzorxQW) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/QWXqVJV)|
| Danny | [Codepen](https://codepen.io/danny666/pen/ZEdXwQz)|
| Mia | [Codepen](https://codepen.io/mnscake/pen/XWLzdBj)|
| Rowan | [Codepen](https://codepen.io/dxnqcnen/pen/xxoPXrE)|
| Triple | [Codepen](https://codepen.io/riku30/pen/MWMreLm)|
| Zoe | [Codepen](https://codepen.io/roanne-rou/pen/GRbyjgR)|
| Peter | [Codepen](https://codepen.io/peterhsj/pen/oNrpGoY)|
| Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/PorXjzV) |
| Ching | [Codepen](https://codepen.io/huangching/pen/bGPzBga) |
| Eden | [Codepen](https://codepen.io/iseden/pen/poMgzKK)|
| 叮咚 | [Codepen](https://codepen.io/yen-kg/pen/RwmQXXe)|
<!--
| Discord | [Codepen]() |
-->