隨著微軟擁抱開源,微軟官網出現 .NET/C# 以外的語言教學已不是新鮮事(之前就出過 Python 教學影片),這回輪到 Vue.js 了!

如果你還不知道 Vue.js 是什麼,這裡簡單科普一下。

Vue.js 是當今(2022 年)的前端三大框架 - VAR (Vue.js、Angular、React) 之一。Vue.js 雖然沒有原廠撐腰(Angular 有 Google、React 有 Facebook),但 Github Vue.js 專案獲得的星星數曾榮登總排第三 (2022 九月排名則為第七,React 排第九、Angular 第 44,參考)。我心中 Vue.js 與其他二者最大的差別在於它是「漸進式框架」,可以只在 HTML <script src="https://unpkg.com/vue@next"> 引用它繼續用原本的方式開發網頁。不需為了框架多學一整套開發工具(node.js、npm、webpack...)

Vue.js 尤其適合「覺得 jQuery 已經很 OK,只想再補上 MVVM 改善生活品質」的全端工程師(延伸閱讀:從「鄙視 jQuery」聊起 -技術鄙視從何而來?),Vue.js 是一把超容易上手的輕巧利器;但若以前端開發為職志,想效法 Gmail、Facebook 將網頁技術發揮到淋漓盡致,漸進式框架的 Vue.js 也有複雜且功能強大的玩法,變身需要技巧方能駕御但威力驚人的重兵器。

依據 Stackoverflow 2022 年的開發者調查,Vue.js 目前在 VAR 中排第三,僅落後 Angular 1.5 個百分點,但我個人看好 Vue.js 會超越 Angular。(延伸閱讀:StackOverflow 2022 年度開發者調查 - 前端框架誰稱王?你愛你的程式語言嗎?)

微軟 Learn 網站(註:前陣子大改版,把官方文件、訓練、認證、QA、程式範例、研討會資料整併成單一入口),有個「使用 Vue.js 邁出第一步」教學,透過實際動手做教你開始用 Vue.js 寫網頁。

這個教學適合已具備 HTML/CSS 跟基本 JavaScript 基礎的人,開發工具用的自然是 VSCode,會用到 Git 下載程式範例,後期也會用到 npm、webpack 等正統前端工具。教學有翻成中文,看起來不是機器翻譯,品質還不錯。如果你會寫一點網頁,想認識 Vue.js,可以花 110 分鐘實際玩一下。

教學共有四個模組,雖然我已離開新手村一陣子,還是全程走一次,溫故知新兼檢查遺漏知識,筆記如下:

  1. 開始使用 Vue

    • 介紹用 <script src="https://unpkg.com/vue@next"></script>const App = Vue.createApp({ ... }); 入水的輕前端做法
    • 用 git clone 下載範例專案,使用 VSCode 編輯修改程式
    • 介紹好用的 Live Server 擴充功能,感受過程式一存檔在瀏覽器馬上看到結果,你就回不去了 (沒體驗過終生遺憾呀)
    • 學習 v-bind:attribute、:attribute 繫結、v-bind:class="{ cssName: true/false }" 用法、v-bind:style="styleObject" / styleObject = { 'background-color': 'red' } 用法
    • 模組結尾都有個小測驗
  2. 使用 Vue.js 的動態頁面顯示

    • 學習使用 v-for 跑迴圈將陣列轉成數量不定的 DOM 元素
    • v-for="(value, index) in arrayData" 同時取陣列元素及序號
    • 從 Github 下載產品陣列資料產生清單 (學到 Number.toLocaleString(),數字轉當地格式)
    • 學習 v-show、v-if、v-else-if、v-else
  3. 在 Vue.js 中使用資料與事件

    • 學習 v-model 雙向繫結到 input 值
    • v-model 在 checkbox 時預設對映成 true/false,但也可用 true-value/false-value 定義對映值
    • v-model 在 select 時對映選取 option 的 value 值
    • 從 Github 下載範例,一個簡單的下拉及 textarea 輸入
    • 學習事件指示詢 v-on:click 或 @click,事件方法寫在 methods 的函式,用 this.propertyName 可存取屬性
    • 學習在 computed 加入函式製作計算屬性,動態產生屬性值
    • 到此為止學到的已可拿來用來寫簡單的輕前端程式,再來 node.js、npm 就要出場了
  4. 開始使用 Vue.js 中的 Vue CLI 和單一檔案元件

    • 安裝 Node.js,用 npm 下載 Vue CLI (命令列工具)
    • vue create projName 建立新專案
    • 了解檔案結構:package.json、public/index.html、src/main.js、src/App.vue、src/components
    • 網頁執行前需要經過編譯,重組出真正要執行的 .html、.js、.css
    • 專業的前端寫法會將網頁拆解成一個個元件,每個元件用的 HTML、JavaScript、CSS 抽取出來包成一個 .vue 檔 (稱為 Single File Componet,SFC)
      延伸閱讀:輕前端使用 Vue SFC (.vue 元件)
    • SFC 的 JavaScript 及 CSS 若較複雜,也可再拆成 .js 及 .css 供 SFC 載入
    • VSCode 擴充套件 Vetur 可支援在 VSCode 編輯 SFC (.vue)、另外可安裝 Sarah Drasner 的 Vue VSCode 程式碼片段快速產生 .vue 主結構
    • 元件以 props 定義屬性(如: props: ['prop1','prop2']),可透過 <comp-name prop1="..." prop2="..."></comp-name> 指定屬性值
    • 元件屬性定義可限制型別、也可傳入複雜型別當成屬性值
    • 要引用元件時,先 import 元件名 from './元件名.vue',再以 components: { 元件名 } 註冊
    • 元件要傳資料到父元件,可寫為 <button @click="$emit('userUpdated', true)">Save user</button>
      父元件寫法:
      <template>
      <user-dialog @user-updated="handleUserUpdated"></user-dialog>
      </template>
      <script>
      import UserDialog from './UserDialog.vue';
      export default {
          methods: {
              handleUserUpdated(success) {
                  if (success) {
                      alert('It worked!!');
                  } else {
                      alert('Something went wrong');
                  }
              }
          },
          components: {
              UserDialog
          }
      }    
      
    • 元件自訂事件
      props: {
          cabins: Array,
      },
      emits: ['bookingCreated'],
      data() {
          return {
              cabinIndex: -1
          }
      },
      methods: {
          bookCabin() {
              if(this.cabinIndex < 0) return;
              this.$emit('bookingCreated', this.cabinIndex);
              this.cabinIndex = -1;
          },
      }    
      
      父元件寫法:
      <booking-form @booking-created="addBooking" :cabins="cruise.cabins"></booking-form>
      

看完心得

這個 Vue.js 入門教學還蠻不錯,從最基本 HTML 載入 vue.js 寫 MVVM JavaScript 的輕前端做法,到需要動用 npm、切元件寫 SFC (.vue) 的正統做法都有講到,採實際動手體驗方式,跟著做完大概就知道 Vue.js 是怎麼一回事了。雖然離能用 Vue 寫完專案或賺錢維生還有一大段距離,也算不錯的開始,有興趣的話不妨花兩小時玩看看,就算不喜歡,長見識也好,呵。

Introduce to the Vue.js traning in Microsoft Learn website.


Comments

Be the first to post a comment

Post a comment