---
tags: Vue3 新手夏令營
---

# Vue3 新手夏令營第二週筆記

## 本週作業簡單說明

新手只需要參考版型 做作品出來就好
不知道怎麼下手的會建議先看解答（學程式不存在抄襲這件事）
就先試著看解答寫一次
然後看解答時 透過註解把一些不懂的地方先記起來就可以加深印象

## 直播的報到說明

在直播開始後的晚上八點到當晚十二點之間有填寫表單的才算報到成功
且至少要參加三次直播並完成報到 才能獲得抽獎的門票
上課的過程中即可陸續提交報到表單（時間超過才填寫表單的不會計入抽獎哦～）

## VS Code 套件
sublime text 應該除了 Live Server 沒有，其他都有類似的套件哦

今天筆記介紹的一些套件如下：
VSCode - Vetur 主要是方便寫 Vue
VSCode - Live Server 可以開啟線上預覽 且每次存檔就刷新
Chrome - Vue Dev tools(注意版本：6.0.0 beta+)

>補充：
>Chrome 的套件有兩種版本 分別針對 Vue2 跟 Vue3
>兩者不能共存 要先停掉其中一個再使用另一個哦

## 先用 jQuery 示範

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>

<!-- 寫一個 id 為 text 的區塊我們等等要用-->
<div id="text"></div>

<!-- 寫一個 id 為 num 的輸入框我們等等要用-->
<input type="number" id="num">

<!-- 下方開始寫 jQuery -->
<script>
// 創建變量 等等把值寫到 #text 裡面
const personText = "我是卡斯伯";

$(document).ready(function(){ // jQuery 的起手式
    $('#text').text(personText); // 獲取 DOM 用 text() 方法寫入值到 DOM 元素上
    $('#num').on('change',function(){ // 監聽輸入框是否改變
        console.log($(this).val()); // 這個 $(this) = $('#num')，可以用 val() 方法獲取到輸入框的值
    })
})
</script>

## 開始說關注點分離

夏令營的課程以 Vue3 為主
先開新檔案 引入 Vue3 的 CDN
語法：`<script src="https://unpkg.com/vue@next"></script>`

然後開始初始化 Vue：
首先 DOM 會寫一個 id="app" 的 div（通常大家習慣這樣寫，但 id 可以用其他的值， app 不是絕對的）

接著在 script 標籤中寫入：

Vue.createApp({
  data,
  methods,
  mounted
})

data, methods, mounted 是起手式（必備三劍客，在後續課程會瘋狂提到 要先記得哦～）

本來 JS 會處理資料、操作ＤＯＭ、取值
Vue 則是用data（管理資料邏輯），methods（觸發器，裡面都是函式、方法），mounted（處理生命週期）

在 Vue 中看到的東西都屬於元件。

今天直播課著重在 data 上，資料可以直接對到畫面，可以把 HTML 拉到資料裡，這就稱為關注點分離。

目前主流三大框架的概念：會習慣性把資料拉出來，用 data 對應資料結構

注意： data 會是函式，methods 是物件，mounted 也是函式
所以上方代碼會寫：

Vue.createApp({
  data(){
    return {
      // 這裡就是所有資料(變數 陣列 物件等等)
    }
  },
  methods: {
    // 裡面會放很多 fn
  },
  mounted(){
    // 開啟頁面要執行的第一次渲染會在這裡撰寫
  }
})

現在回頭講一下剛開始的那個 #app
他是用來註明 Vue 要掛載到畫面哪裡的
所以我們在使用 Vue 框架時會先準備 id 為 app(或其他自訂義名稱) 的位置 指定 Vue 要生成在哪～

最終程式碼會如下：

Vue.createApp({
  data(){
    return {
      // 這裡就是所有資料(變數 陣列 物件等等)
    }
  },
  methods: {
    // 裡面會放很多 fn
  },
  mounted(){
    // 開啟頁面要執行的第一次渲染會在這裡撰寫
  }
}).mount('#app'); // 把 Vue 掛載到 #app 上

## Vue 常見語法介紹
所有指令開頭都是 `v-`
下週會介紹更多指令 今天先學下面這一點點就好：

1. v-text 用來把資料寫入 HTML
簡寫方式為 `{{ 資料名稱 }}`
如下：

<p>{{ name }}</p>

2. v-model 用於資料的雙向綁定
舉例可以用 input type="number" 給其加上指令 v-model="num" 對應 data 中的 num 這個資料
當 input 改變 num 也會改變，反之 num 改變 input 也會變
如下：

<input type="number" v-model="num">

3. data 物件的資料獲取方式
物件用本來的點記法或括弧記法即可取值
例如我們有一個 person 物件
就可以用 {{person.name}} 獲取物件中的名稱這個資料
4. v-bind 動態屬性
可用於動態寫入樣式或網址等等的 HTML 的屬性
比如：
圖片可以用 `:src="imageUrl"`
連結可以用 `:href="item.url"`
樣式可以用 `:class="{'d-none':item.show}"` 樣式名稱在左 判斷在右(true就會套用那個樣式) 樣式名稱如果有 `-` 需要用 `''` 把樣式名稱包起來
5. v-if/v-else-if/v-else
判斷可以寫 v-if="item.gender === 'male'"
同層下方可以直接寫 v-else 表示相反結果（不同層這樣寫會報錯）
同層也可以繼續判斷寫 v-else-if，但 v-else 要寫在最下面，不能中途插入
if 裡面可以繼續包含 if，可以一路包下去，就跟平常寫 JS 一樣
6. v-for 用來跑迴圈
>補充：key 在下週會詳細補充 這裡先知道每次使用 v-for 必須同時加上 key 就好
撰寫方式如下：

<ul>
  <li v-for="item in data" :key="item.id">
  {{ item.name }}
  </li>
</ul>

7. v-on 用來綁定事件
v-on 可簡寫為 `@`
簡單舉例如下：

<!-- 簡寫前 -->
<button type="button" v-on:click="item.num++">按鈕</button>
<!-- 簡寫後 -->
<button type="button" @click="item.num++">按鈕</button>

8. methods 用來放比較複雜的方法(函式)
比如只是要簡單的操作資料 就可以在 HTML 身上撰寫即可
超過一行都建議寫成一個方法拿去套
9. mounted vs create
create 表示 Vue 已經準備好大致上的東西 如 props、data、methods、watch、computed 但還沒處理 DOM 元素
mounted 是初始化的最後一步 他已經處理好 DOM 元素 只差還沒把資料渲染上畫面
因此會建議使用 mounted 取代 create 是比較好的初始化方法哦
## 重要觀念

1. 一定要先定義資料，才能在 HTML 中使用。
2. CDN vs ESModule 只能擇一使用，建議使用 ESModule 的載入方法。

## 六角講師們的繪圖工具

1. skitch 像小畫家一樣畫圖的那個
2. screen Brush 在畫面上寫東西畫箭頭的那個