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

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

###### *date: 2021/7/26*

# 📜 第三週每日任務

[TOC]

## 7/26 (一) 漸入佳境，v-for 指令

<iframe height="300" style="width: 100%;" scrolling="no" title="7/24 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/bGWzVYy?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/bGWzVYy">
7/24 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-for`技術重點

- 參數用`()`包起來
- 需要有`:key`綁定資料

---

## 7/27 (二) 漸入佳境，v-bind 指令

<iframe height="300" style="width: 100%;" scrolling="no" title="7/27 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/eYWxpMd?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/eYWxpMd">
7/27 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-bind`技術重點

- `v-bind`可以用`:`簡寫
- 使用`v-bind`傳遞資料

---

## 7/28 (三) 漸入佳境，v-on 指令

<iframe height="300" style="width: 100%;" scrolling="no" title="7/28 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/XWROmBM?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/XWROmBM">
7/28 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-on`技術重點

- `v-on`可以用`@`簡寫
- `v-on`可以傳**方法**或**簡單判斷式**

---

## 7/29 (四) 漸入佳境，methods 資料操作

<iframe height="300" style="width: 100%;" scrolling="no" title="7/29 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/qBmgOJx?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/qBmgOJx">
7/29 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>

### `methods`技術重點

- 結合前面的指令，配合`methods`來操作畫面

---

## 7/30 (五) 漸入佳境，computed 自動計算

<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/yLbZYwa?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/yLbZYwa">
</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>

### `computed`技術重點

- `computed`每次資料更新都會觸發計算
- `computed`不會影響`data`的值

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