Vue是個Javascript框架，當我們寫的程式很小的時候，其實HTML+CSS+Javascript就夠了，但是，當我們的程式越來越複雜的時候，有很多的操作就會變複雜，Vue就可以幫我們的網頁開發變得簡單一點。目前最新版是Vue 3，參考網路文章的時候，要注意一下版本的差異。另外，Vue 3有四種寫法，我們採用的是Composition + SFC (Single File Component)的寫法。

• Tutorial (官方教學)
  • Getting Started
    • 我們採用的是Composition + SFC (Single File Component)的寫法
      • Introduction
        • Single-File Components
        • API Styles
      • Single-File Components
  • Declarative Rendering
  • Attribute Bindings
  • Event Listeners
  • Form Bindings
  • Conditional Rendering
  • List Rendering
  • Computed Property
  • Lifecycle and Template Refs
  • Watchers
  • Components
  • Props
  • Emits
  • Slots
• Guide (官方教學)
  • Class and Style Bindings
  • Provide / Inject
  • Async Components
    • 可改用Suspense
  • Typescript
    • TypeScript with Composition API
• Vue Tutorial (by W3Schools)
• 重新認識Vue.js
• Vue 3 + firestore
  • Vue 3 Firestore example: Build a CRUD Application
• UI Libraries
  • User Choice: Vuetify, Quasar
• The best UI frameworks for Vue 3
  • Vuetify 3 (Titan) (以Material Design為基礎、有簡體中文的文件)
  • Quasar (以Material Design為基礎，還支援SPA、PWA、SSR…)
  • BalmUI (以Material Design為基礎) (似乎用的人比較少)
• 15 of the Most Interesting Vue UI Component Libraries for 2023
  • Vuetify 3
  • Quasar
  • Vue Material Kit (Vue Material Kit 2改用Bootstrap 5)
    • 由Supportive Tim支持
  • Vue Material
    • 由Supportive Tim支持

環境設定

第一個Vue程式

Vue元件

Vue表單

Vue表單與陣列

Vuetify

Vue Router

Vue部署