iT邦幫忙

jk vue3相關文章
共有 30 則文章
鐵人賽 Vue.js DAY 30
Vue3 - 從零開始學 系列 第 30

技術 Vue3 - 從零開始學 - Day30 - 專案發佈

最後一個單元要來介紹如何匯出專案,也就是產生出可以部署在網站上的檔案。首先回到 package.json,有一個指令是 build: "scripts...

鐵人賽 Vue.js DAY 29
Vue3 - 從零開始學 系列 第 29

技術 Vue3 - 從零開始學 - Day29 - Route 參數傳遞

這個單元接續上一個單元介紹的 Route 的功能,在 Route 之中,也會希望可以將變數的內容傳到下一頁,例如想要跳轉到 AboutView.vue 時,也傳...

鐵人賽 Vue.js DAY 28
Vue3 - 從零開始學 系列 第 28

技術 Vue3 - 從零開始學 - Day28 - Route

網頁最重要的就是換頁,俗稱路由,在 Vue3 要完成路由功能,必須要使用 route 。由於專案是使用 CLI 工具所產生的,所以這邊也必須要使用 CLI 工具...

鐵人賽 Vue.js DAY 27
Vue3 - 從零開始學 系列 第 27

技術 Vue3 - 從零開始學 - Day27 - Composition 模組

這個單元繼續討論 Composition API,在模組的使用與 Option API 有什麼不同?這裡可以跟之前 Day20 - 模組共用 來做一個比對。 首...

鐵人賽 Vue.js DAY 26
Vue3 - 從零開始學 系列 第 26

技術 Vue3 - 從零開始學 - Day26 - Composition 元件

這個單元繼續討論 Composition API,在元件的使用與 Option API 有什麼不同? 首先,先宣告一個元件檔案 Component.vue,檔案...

鐵人賽 Vue.js DAY 25
Vue3 - 從零開始學 系列 第 25

技術 Vue3 - 從零開始學 - Day25 - Composition 生命週期

這個單元繼續討論 Composition API,那麼在生命週期上與 Option API 的寫法上有什麼不同? 與之前 Day19 介紹的 Option AP...

鐵人賽 Vue.js DAY 24
Vue3 - 從零開始學 系列 第 24

技術 Vue3 - 從零開始學 - Day24 - Composition 監聽

這個單元繼續討論 Composition API,在變數的監聽上與 Option API 有什麼不一樣? 宣告 ref 變數: <template>...

鐵人賽 Vue.js DAY 23
Vue3 - 從零開始學 系列 第 23

技術 Vue3 - 從零開始學 - Day23 - Composition input

這個單元要來繼續探討 Composition ,而在 Composition API 使用表單的 input 又有哪邊不一樣? 宣告 ref 變數與 input...

鐵人賽 Vue.js DAY 22
Vue3 - 從零開始學 系列 第 22

技術 Vue3 - 從零開始學 - Day22 - Composition 函式

這個單元要來繼續介紹在 Composition API 的函式使用方法。 函式的宣告直接宣告在 setup() {} 即可,如果是要修改 ref 的變數時: &...

鐵人賽 Vue.js DAY 21
Vue3 - 從零開始學 系列 第 21

技術 Vue3 - 從零開始學 - Day21 - Composition

呼~ 我們花了 20 天來介紹 Vue3 的最基礎語法,在前面 20 天介紹的 Vue3 語法稱為 Options API,接下來幾天會介紹另外一種語法稱為 C...

鐵人賽 Vue.js DAY 20
Vue3 - 從零開始學 系列 第 20

技術 Vue3 - 從零開始學 - Day20 - 模組共用

這個單元要來介紹另外一種模組化的方式,先前都是介紹整個 .vue 的元件可以獨立分開,有的時候會需要函式的模組化。 一開始,先宣告一個按鈕,這個按鈕一樣按下去會...

鐵人賽 Vue.js DAY 19
Vue3 - 從零開始學 系列 第 19

技術 Vue3 - 從零開始學 - Day19 - 生命週期

生命週期指的就是一個 .vue 檔案,被瀏覽器載入完成所產生的一連串的執行順序。 除了先前幾個單元介紹的 data(){} 是宣告變數的地方,methods:...

鐵人賽 Vue.js DAY 18
Vue3 - 從零開始學 系列 第 18

技術 Vue3 - 從零開始學 - Day18 - 製作 Tab 瀏覽

元件大致上的使用規則都已經了解後,這一個單元會實際用一個例子來講解元件的其中一個用法,就是可以使用元件來製作 Tab 的瀏覽方式。 一開始先新增三個元件檔案,分...

鐵人賽 Vue.js DAY 17
Vue3 - 從零開始學 系列 第 17

技術 Vue3 - 從零開始學 - Day17 - 元件 slot

元件可以幫助我們將一些共用的畫面來切割並且可以重複使用,讓維護成本降低,但是有得時候雖然使用了元件,但還是會需要一些畫面的微調。 這個單元就要來介紹可以傳入 h...

鐵人賽 Vue.js DAY 16
Vue3 - 從零開始學 系列 第 16

技術 Vue3 - 從零開始學 - Day16 - 元件更新

在上一個單元是將元件傳出資料給上層,但還是必須要透過一個按鈕才可以觸發事件,能不能有自動偵測的方式做到? 這個單元就要來繼續討論元件,元件可以自動把資料傳出給上...

鐵人賽 Vue.js DAY 15
Vue3 - 從零開始學 系列 第 15

技術 Vue3 - 從零開始學 - Day15 - 元件數值傳出

在上一個單元,學習到了如何從上層傳資料給子元件,也就是由上而下,但有得時候會需要有下而上,也就是從子元件傳資料給上層。 這個單元會將表單的輸入框,切成元件後,傳...

鐵人賽 Vue.js DAY 14
Vue3 - 從零開始學 系列 第 14

技術 Vue3 - 從零開始學 - Day14 - 元件傳入參數

在上一個單元已經學習到如何引用元件,這個單元就要針對元件來進行一些操作。 元件傳入參數 元件可以把資料傳給元件,那麼元件就必須要接收資料,修改 Header.v...

鐵人賽 Vue.js DAY 13
Vue3 - 從零開始學 系列 第 13

技術 Vue3 - 從零開始學 - Day13 - 元件

從這個單元開始要進入模組化的世界,當程式碼越寫越多時,為了方便維護,會將共用的程式碼寫成一個一個的模組,稱為模組化。 在 Vue3 的定義中,這個模組稱為 co...

鐵人賽 Vue.js DAY 12
Vue3 - 從零開始學 系列 第 12

技術 Vue3 - 從零開始學 - Day12 - 監聽

接下來這個單元來討論監聽,什麼是監聽呢? 首先,根據之前所學到的,新增一個按鈕,這個按鈕按下去會呼叫一個函式: <template> {{ co...

鐵人賽 Vue.js DAY 11
Vue3 - 從零開始學 系列 第 11

技術 Vue3 - 從零開始學 - Day11 - computed

從前幾個單元,對於函式的呼叫已經有一定程度的了解,這個單元來探討另外一種宣告函式的方式,computed。 先宣告一個簡單的函式: <script>...

鐵人賽 Vue.js DAY 10
Vue3 - 從零開始學 系列 第 10

技術 Vue3 - 從零開始學 - Day10 - 表單 submit

在一個正常的表單流程之中,填完所有欄位之後,會有一個送出按鈕,按下這個送出按鈕之後,資料才會送出去。但如果將所有表單欄位宣告出來的,會需要宣告一堆變數,在程式碼...

鐵人賽 Vue.js DAY 9
Vue3 - 從零開始學 系列 第 9

技術 Vue3 - 從零開始學 - Day9 - 表單常用欄位

上一個單元學習到了表單中的 input 輸入框與 Vue3 的綁定,但在表單中,還有許多其它的輸入欄位,接下來這個單元繼續討論其它常用的表單欄位。 多行的輸入文...

鐵人賽 Vue.js DAY 8
Vue3 - 從零開始學 系列 第 8

技術 Vue3 - 從零開始學 - Day8 - 表單 input

在上一個單元學習到了如何控制按鈕按下去所產生的事件,有了製作按鈕的經驗之後,在網頁上最常使用的輸入方式就是表單,也是在開發上最容易遇到的需求。 第一個最常使用的...

鐵人賽 Vue.js DAY 7
Vue3 - 從零開始學 系列 第 7

技術 Vue3 - 從零開始學 - Day7 - Demo

在經歷過一週的基礎洗禮之後,想必是想摩拳擦掌,好好大展身手了。 這個單元會有一個實際的例子,在這個例子,會有一個按鈕,按下這個按鈕之後,會把數值加上 1,就是這...

鐵人賽 Vue.js DAY 6
Vue3 - 從零開始學 系列 第 6

技術 Vue3 - 從零開始學 - Day6 - 函式

前兩個單元已經學會了 if 判斷式與迴圈,接下來討論在程式語言之中最常用的函式。 首先,先宣告兩個變數 x 跟 y,型別都是數字: <script>...

鐵人賽 Vue.js DAY 5
Vue3 - 從零開始學 系列 第 5

技術 Vue3 - 從零開始學 - Day5 - 迴圈

在上一個單元,已經學習到如何使用 if 判斷式,接下來這個單元進入到迴圈。if 判斷式可以方便使用變數來控制內容是否顯示,而迴圈則是方便顯示重複的內容。 迴圈通...

鐵人賽 Vue.js DAY 4
Vue3 - 從零開始學 系列 第 4

技術 Vue3 - 從零開始學 - Day4 - if 判斷式

在上一個單元,已經學習到如何顯示 Hello World,這個最基礎的知識之後。接下來繼續打基礎,從這個單元開始,會接觸各種程式邏輯判斷的方法,會先從 if 判...

鐵人賽 Vue.js DAY 3
Vue3 - 從零開始學 系列 第 3

技術 Vue3 - 從零開始學 - Day3 - Hello World

在上一個單元,已經學會了基本的 Vue3 程式流程,接下來將會開始探討一些最基礎的知識,就如往常學習其它程式語言一樣,從 Hello World 開始。 接下來...

鐵人賽 Vue.js DAY 2
Vue3 - 從零開始學 系列 第 2

技術 Vue3 - 從零開始學 - Day2 - 專案結構

在上一個單元,已經學會了如何使用 Vue3 的 CLI 工具來建立專案,而在建立好專案之後,可以使用 Visual Studio Code 來打開 vue-de...

鐵人賽 Vue.js DAY 1
Vue3 - 從零開始學 系列 第 1

技術 Vue3 - 從零開始學 - Day1 - 建立專案

關於鐵人賽 進入業界已經第 16 年,回想剛接觸電腦的那一年,在電腦螢幕面前編輯 HTML 的那種成就感,一直到現在依舊在工程師的崗位奮戰中。而如今在 Web...