站長阿川 · 02月10日

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 最基本觀念

內容很多，大部份看不懂沒關係，稍微有個印象就好

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

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

<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

data() {
  return {
    notes: [
      {
        title: "春節行程安排",
        content: "吃飽睡，睡飽吃",
        color: "red",
      },
      {
        title: "工作待辦事項",
        content: "詢問各家廠商報價",
        color: "green",
      },
      {
        title: "運動健身計畫",
        content: "每天早上六點去健身",
        color: "blue",
      },
    ]
  }
}

使用以下這段 code 作為 template

<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>