漸進式前端框架 Vue

基礎簡介

• 漸進式，指可以自底部向上逐層應用。Vue的漸進式性質使其使用方式非常靈活，可使用完整的框架，也可僅使用部分功能。
• 根據書中的示範，我們可以直接使用CDN的方式進入Vue框架，並採用Vue 3.0.x的版本來學習。
• 首先使用CDN的方式引入Vue 3的新版本。
  

Vue 3的新特性

• Vue 3的設計目標為：
  1. 更小的尺寸、更快的速度
  2. 更現代化的語法、加強TypeScript支援
  3. API設計的部分，增強統一、一致性
  4. 提高前端專案的可維護性
  5. 支援更多強大功能，提高開發效率

實作

• 接下來試著使用Vue的方式實現一個使用者登入介面，目標功能：
  1. 需有標題，以提示使用者當前登入狀態。
  2. 未登入時，需有兩個輸入匡及登入按鈕，以輸入使用者帳號及密碼。
  3. 登入後，隱藏輸入匡、提供登出按鈕。
• 以下為程式碼範例：
  
  
• 這段程式中採用內嵌JavaScript指令稿的方式實現，程式中定義Vue元件時，實際上是定義了一個JavaScript物件，data方法是用來傳回元件所需資料，methods則定義元件所需的方法。
• v-if是vue提供的條件著色功能，true則著色，否則不著色，即顯不顯示的條件式。
• v-model用以進行雙向綁定，當輸入匡中的文字變化，綁定的對象也會跟著變化。
• 執行結果如下：
  
• 原本書中引用Vue的網址無法使用，因此我去網路上尋找相關辦法時，查到了下面這個網址，說明vue@next已經失效，可以改成vue@3後，即可繼續使用。
  https://blog.darkthread.net/blog/unpkg-vue-next-broken/