課程目標

  • 能夠運行 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 就好了

<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>
  • 陣列內容就只有三筆資料,就只要顯示這三筆資料就好
  • 在 application state 裡面的陣列,直接用 索引 來取出值就好,這一課先不用寫 for 迴圈
  • color 這一課還不會用到,可以先忽略沒關係
  • 請在 <style> 加上一些樣式,讓整個頁面漂亮一點
  • 每則記事可以單純的放進網頁就好,不用像 Google Keep 那樣花式的排版(那種叫瀑布流排版,很難寫)

做出以上功能,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


共有 19 則留言

交作業 https://jsfiddle.net/birdie2019/54pzj7w2/51/

按讚的人:

作業繳交 https://jsfiddle.net/kyvh85Lc/39/

按讚的人:

交作業 https://jsfiddle.net/superyngo/2ft05c8v/

按讚的人:

寫得很好,順利完成!

交作業 https://jsfiddle.net/evon0306/wvmr36kn/2/

按讚的人:

寫得很好,順利完成!

交作業 https://jsfiddle.net/shnny/v1q74stg/18/

按讚的人:

寫得很好,順利完成!

交作業,再麻煩站長了,謝謝! https://jsfiddle.net/7ub1jqg0/

按讚的人:

https://jsfiddle.net/wimp9487/L4g18f5w/6/ 交作業!

按讚的人:

https://jsfiddle.net/ZooeyLai/x1sq7mhg/23/ 交作業~

按讚的人:

交作業 https://codepen.io/adens123/pen/wvNxJXJ

按讚的人:

作業繳交

https://jsfiddle.net/mb2902911/e9cod7s6/13/

按讚的人:

交作業了 https://jsfiddle.net/shvk2x4L/

按讚的人:

交作業了~ https://jsfiddle.net/erika_sun/ftgwme7h/1/

按讚的人:

交作業 https://jsfiddle.net/zoetang886/d8er9o40/23/

按讚的人:

2024.02.15 https://jsfiddle.net/ob42wk0d/
稍微看了官方文件,不管中文還是英文,都是有看沒有懂,要實作才比較理解😅

按讚的人: