2024-09-12 JavaScript 系列七：第1課 ── 認識 Vue 基本環境與 render state

發表於 分類於 閱讀次數：
2024-09-12 JavaScript 系列七：第1課 ── 認識 Vue 基本環境與 render state

JavaScript 系列七：第1課 ── 認識 Vue 基本環境與 render state
課程目標
能夠運行 Vue 基本環境
能夠 render state
課程內容
身為工程師，要習慣到處翻閱各種技術文件

這次的課程，我不會手把手帶領，細談所有觀念

我會一次提供一個官網連結。請你一邊閱讀，一邊把其中的範例貼到 jsfiddle 跑跑看

我會額外提供簡單介紹＆關鍵字，然後補充一些注意事項

官網文件內容是英文，如果對英文沒把握，就去翻中文官網

https://cn.vuejs.org/guide/introduction.html

但是，長遠來說，還是要逐漸提升自己的英語閱讀能力才行

先學基本的安裝＆運行

https://vuejs.org/guide/quick-start.html
這系列課程，我們用最簡單的 CDN 環境來跑就好了，先只學 CDN 那一段就好

接著來學 Vue 最基本觀念

https://vuejs.org/guide/essentials/application.html
https://vuejs.org/guide/essentials/template-syntax.html
內容很多，大部份看不懂沒關係，稍微有個印象就好

如同我在前言所說，同一件事有很多種花俏寫法，你根本不用全部學會

這一課我們只要學會如何 render state 就好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  {{ user.name }} 喜歡吃 {{ fruits[0].name }} 以及 {{ fruits[1].name }}
</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        user: {
          name: "John Doe"
        },
        fruits: [
          {
            name: "Apple",
          },
          {
            name: "Banana",
          },
        ]
      }
    }
  }).mount('#app')
</script>

上面這段範例，在 data() 函式將 application state 準備好

然後只要將一段作為 UI 的 html 寫好，我們稱之為模板（template）

接著 Vue 就會把 state 放進 template 裡面，把結果給 render 出來

貼到 jsfiddle 跑跑看吧，你會發現非常簡單、好理解

課後作業
這系列課程，我們要模仿 Google Keep 製作一個應用程式

請先把玩一下 Google Keep https://keep.google.com/

作業使用 jsfiddle 來寫

這一課先簡單呈現 UI 就好

請使用以下這段 code 作為 application state

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
data() {
  return {
    notes: [
      {
        title: "春節行程安排",
        content: "吃飽睡，睡飽吃",
        color: "red",
      },
      {
        title: "工作待辦事項",
        content: "詢問各家廠商報價",
        color: "green",
      },
      {
        title: "運動健身計畫",
        content: "每天早上六點去健身",
        color: "blue",
      },
    ]
  }
}

使用以下這段 code 作為 template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="app">
  <div class="note">
    <h3 class="title">
      <!-- 請顯示第一個項目的標題 -->
    </h3>
    <p class="content">
      <!-- 請顯示第一個項目的內容 -->
    </p>
  </div>
  <div class="note">
    <h3 class="title">
      <!-- 請顯示第二個項目的標題 -->
    </h3>
    <p class="content">
      <!-- 請顯示第二個項目的內容 -->
    </p>
  </div>
  <div class="note">
    <h3 class="title">
      <!-- 請顯示第三個項目的標題 -->
    </h3>
    <p class="content">
      <!-- 請顯示第三個項目的內容 -->
    </p>
  </div>
</div>

陣列內容就只有三筆資料，就只要顯示這三筆資料就好
在 application state 裡面的陣列，直接用 索引 來取出值就好，這一課先不用寫 for 迴圈
color 這一課還不會用到，可以先忽略沒關係
請在 <style> 加上一些樣式，讓整個頁面漂亮一點
每則記事可以單純的放進網頁就好，不用像 Google Keep 那樣花式的排版（那種叫瀑布流排版，很難寫）
做出以上功能，你就完成這次的課程目標了！