# 🏅 Day1 - Vue.js 的基礎魔法：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 / 答案 |
|:----------------:|:-------------------------------------------------------------------:|

<!--

| user | [CodePen]() |

-->