44 篇文件帶有標籤「Vue 作品實戰 2023 冬季班」

介紹官方推薦的狀態管理工具:Pinia

Pinia起手式範例

Pinia搭配Composition API使用。

Vite簡介，以及使用Vite快速創建一個乾淨的Vue專案

介紹在Vite調整環境變數的方式。

先前透過cdn以及Vue CLI的方式去載入VeeValidate。這次要在VIte + Create Vue 的環境下安裝Vue Axios這個套件。

Vite+Vue+Router新專案初始化內容紀錄

介紹如何使用NPM的方式載入外部套件。

Vue CLI 安裝及開啟一個專案

環境建立中，會介紹Vue Cli、Vue Cli (圖形化介面)、Vue + Vite

在Vue CLI所建立的專案中，新增一個卡片元件，並且將該元件放到about頁面中的範例。

Vue CLI 依據 [Vue CLI]NPM安裝及專案初始化 內的創建新專案步驟，創建新專案後，該專案的內容

在Vue CLI中，我們可以根據開發或上線環境，分別設定環境變數。

輸入錯誤路由時，有兩種方式。第一種為顯示404頁面，告訴使用者沒有當前路由。另一種為直接將使用者導向正確的頁面。

介紹如何在Vite vue環境下加上目前市佔率最高的CSS框架-Bootsrap。並且加上gh-pages自動調整發布的分支。

Vue Router可以透過this.$router做到許多操作。包含回到上一頁，甚至臨時新增路由都可以做到。

在這個章節會介紹Vue Router，404頁面，頁面跳轉等等。以及在做電商時，會使用到的動態路由。

具名視圖範例。

動態路由使用axios取得randomuser api 資料範例。

介紹Vue Router的巢狀路由。

Vue Router起手式。

在Vite環境下，使用Vue router建立頁面元件並加入路由中

Vue Router另外提供幾個功能。可以將目前所在的路由對應的RouterLink加上一個啟用狀態的CSS。另外也可以設定在切換路由時預設滾動的位置。

常用的Options API們

最近報名參加了六角學院的2023Vue作品實戰班,希望可以在這邊補完前端求職的最後一塊拼圖

範例程式碼

事件處理v-on (@) 以及事件觸發修飾符

屬性綁定以及樣式綁定的指令

渲染畫面會用到的指令們。

v-model綁定不同input的介紹

內層元件要向外層元件傳遞資料時，需要使用Emit事件來觸發。本篇介紹Emit事件的傳遞流程以及Emit驗證。

元件在使用時，因為資料各自是獨立的，所以需要透過Props向內傳遞資料。介紹Props的定義方式，以及傳入資料型別驗證。

在元件中可以在template中插入slot插槽，提供給外層的元件將片段插入插槽中。

元件可以提供插槽給外層去插入程式碼片段。但是有時候該插槽會需要使用到內層元件的某些資料。這就稱為Slot的Props。

元件的介紹

引用外部套件。

開始使用Vue

簡單介紹生命週期的概念，包含資料什麼時候準備完畢，什麼時候可以操作裡面的DOM等等。

自訂指令介紹。

在使用Vue的時候元件有時候會有很多層，使Props來傳遞會造成程式碼複雜。這時候可以使用Provide，來直接跨多層子元件傳遞資料。通常適用在驗證登入資訊，要將token傳遞給內層元件。

快速取得DOM元素

傳送撰寫的程式碼片段到指定的區塊！！ 但是有一些些限制，如要傳送的位子尚未生成完畢，則無法傳送。

將相同資料給抽離出來，精簡程式碼以及增加維護性。

在使用元件時，有時候希望外層元件可以跟內層元件資料可以響應。這時候可以使用v-model搭配props以及$emit來達成。並且可以綁定複數的狀態在同一個元件上給元件使用。