---
title: Vue 3 daily task
tags: 六角學院, Vue 3 新手夏令營
date: 2021/7/19
---

###### tags: `六角學院` `Vue 3 新手夏令營`

###### *date: 2021/7/19*

# 📜 第二週每日任務

[TOC]

## 7/19 (一) 循序漸進，安裝 Devtools

[Vue Devtools chrome 套件](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg)

### Vue devtools 常見問題

- 需確保當前頁面一定要有 createApp 的程式碼
（如果當頁有，可以另開新分頁確認，有時候重新整理也不會顯示）
- Vue 並非使用開發版本
（課程中是使用開發版本）
- dev tools 並非對應 Vue 3 的版本，請確認是否使用 dev 版本
（兩者僅能擇一開啟）

---

## 7/20 (二) 循序漸進，綁定資料

<iframe height="300" style="width: 100%;" scrolling="no" title="7/20 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/jOmXdmv?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/jOmXdmv">
7/20 Vue 3 新手夏令營</a> by Johnson Mao (<a href="https://codepen.io/vsfvjiuv-the-typescripter">@vsfvjiuv-the-typescripter</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 綁定資料的 Vue 指令技術重點

- 使用`{{}}`綁定資料
- 使用`v-text`綁定資料
- 使用`v-model`綁定資料 (`v-model`是雙向綁定)

---

## 7/21 (三) 循序漸進，mounted 生命週期

<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/eYWbxea?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/eYWbxea">
</a> by Johnson Mao (<a href="https://codepen.io/vsfvjiuv-the-typescripter">@vsfvjiuv-the-typescripter</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `mounted`生命週期技術重點

- `mounted`是屬於生命週期的初始化，只會執行一次

---

## 7/22 (四) 循序漸進，雙向綁定

<iframe height="300" style="width: 100%;" scrolling="no" title="7/22 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/rNmoPrB?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/rNmoPrB">
7/22 Vue 3 新手夏令營</a> by Johnson Mao (<a href="https://codepen.io/vsfvjiuv-the-typescripter">@vsfvjiuv-the-typescripter</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `v-model`雙向綁定技術重點

- 利用`v-model`雙向綁定，達到顯示與資料同步

---

## 7/23 (五) 循序漸進，修飾符

<iframe height="300" style="width: 100%;" scrolling="no" title="7/23 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/ExmGrdV?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/ExmGrdV">
7/23 Vue 3 新手夏令營</a> by Johnson Mao (<a href="https://codepen.io/vsfvjiuv-the-typescripter">@vsfvjiuv-the-typescripter</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 修飾符技術重點

- `v-model`資料型態預設是`Stirng`
- `v-model`後面加`.number`，會把傳進來的資料型態變成`Number`
- `@click`後面加`.prevent`，會取消默認事件

{%hackmd @JohnsonMao/theme-Wood-Fired %}