這個單元要來繼續介紹在 Composition API 的函式使用方法。 函式的宣告直接宣告在 setup() {} 即可，如果是要修改 ref 的變數時： <script> import...
呼～ 我們花了 20 天來介紹 Vue3 的最基礎語法，在前面 20 天介紹的 Vue3 語法稱為 Options API，接下來幾天會介紹另外一種語法稱為 Composition API。 看到這裡...
這個單元要來介紹另外一種模組化的方式，先前都是介紹整個 .vue 的元件可以獨立分開，有的時候會需要函式的模組化。 一開始，先宣告一個按鈕，這個按鈕一樣按下去會累加 1： <template&g...
生命週期指的就是一個 .vue 檔案，被瀏覽器載入完成所產生的一連串的執行順序。 除了先前幾個單元介紹的 data(){} 是宣告變數的地方，methods: {} 是宣告函式的地方，還有許多的其它的...
元件大致上的使用規則都已經了解後，這一個單元會實際用一個例子來講解元件的其中一個用法，就是可以使用元件來製作 Tab 的瀏覽方式。 一開始先新增三個元件檔案，分別是 components/Compon...
元件可以幫助我們將一些共用的畫面來切割並且可以重複使用，讓維護成本降低，但是有得時候雖然使用了元件，但還是會需要一些畫面的微調。 這個單元就要來介紹可以傳入 html 標籤給元件的方法，slot。使用...
在上一個單元是將元件傳出資料給上層，但還是必須要透過一個按鈕才可以觸發事件，能不能有自動偵測的方式做到？ 這個單元就要來繼續討論元件，元件可以自動把資料傳出給上層。 首先宣告一個元件檔案 compon...
在上一個單元，學習到了如何從上層傳資料給子元件，也就是由上而下，但有得時候會需要有下而上，也就是從子元件傳資料給上層。 這個單元會將表單的輸入框，切成元件後，傳出輸入框所輸入的資料給上層。 首先先宣告...
在上一個單元已經學習到如何引用元件，這個單元就要針對元件來進行一些操作。 元件傳入參數 元件可以把資料傳給元件，那麼元件就必須要接收資料，修改 Header.vue： <template>...
從這個單元開始要進入模組化的世界，當程式碼越寫越多時，為了方便維護，會將共用的程式碼寫成一個一個的模組，稱為模組化。 在 Vue3 的定義中，這個模組稱為 component，中文翻譯為元件或組件，所...