點燈坊

失くすものさえない今が強くなるチャンスよ

タグ : Vue

Hash Mode vs. HTML 5 Mode

當切換 URL 時,Vue Router 會避免對 Server 發出 Request ,直接由 JavaScript 去 render HTML,在 HTML 5 之前會使用 Hash Mode,現在會使用 HTML 5 Mode。

由 Vite 建立 Vue Router 專案

由於並不是所有的應用都會使用 Vue Router,因此 Vue 本身並不包含 Vue Router,而是以獨立 Package 形式存在,由 Vite 建立專案時可選擇是否使用 Vue Router。

使用 defineEmits() 定義 Event

從 Vue 3 開始,Vue 經過多次語法演進,到目前 Vue 3.2 所提供的 Script Setup 後,Vue 的寫法總算穩定下來,改用 defineEmits() 定義 Event,也是目前 Vue 官網範例的正式寫法,但還是有不少網路上範例或書籍用的是 Vue 3 早期寫法,雖然不再建議這樣寫,但還是得看得懂,並藉此了解 Vue 語法的演變軌跡。

Prop 也能 Reactive

若希望外部對 Component 不只提供初始值而已,還能繼續與外部 State 連動,則要使用 defineProps() + computed() 組合完成。

使用 defineProps() 定義 Prop

從 Vue 3 開始,Vue 經過多次語法演進,到目前 Vue 3.2 所提供的 Script Setup 後,Vue 的寫法總算穩定下來,改用 defineProps() 定義 Prop,也是目前 Vue 官網範例的正式寫法,但還是有不少網路上範例或書籍用的是 Vue 3 早期寫法,雖然不再建議這樣寫,但還是得看得懂,並藉此了解 Vue 語法的演變軌跡。

整合 Vue 3 與 Pico CSS

Pico CSS 為著名的 Classless CSS,有別於 Tailwind CSS 的 Utility First CSS,他為 Semantic HTML 提供了 Default Style,讓我們在開發時專心於 HTML 與 Vue。

實現 Reactive Select

多個 Select 連動也是實務上常見需求,傳統 jQuery 必須搭配複雜的 Event 與重組 HTML 才能達成,使用 Vue 的 Reactivity API 將可輕鬆達成需求。