iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2 Like 2 留言 5218 瀏覽

鐵人賽 Vue.js DAY 1

Vue3 - 從零開始學系列第 1 篇

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

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

Mr. JK ‧ 2023-09-01

0 Like 2 留言 3023 瀏覽

鐵人賽 Vue.js DAY 2

Vue3 - 從零開始學系列第 2 篇

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

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

Mr. JK ‧ 2023-09-02

0 Like 0 留言 2455 瀏覽

鐵人賽 Vue.js DAY 3

Vue3 - 從零開始學系列第 3 篇

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

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

Mr. JK ‧ 2023-09-03

0 Like 0 留言 1728 瀏覽

鐵人賽 Vue.js DAY 4

Vue3 - 從零開始學系列第 4 篇

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

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

Mr. JK ‧ 2023-09-04

0 Like 1 留言 1639 瀏覽

鐵人賽 Vue.js DAY 5

Vue3 - 從零開始學系列第 5 篇

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

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

Mr. JK ‧ 2023-09-05

0 Like 0 留言 1439 瀏覽

鐵人賽 Vue.js DAY 8

Vue3 - 從零開始學系列第 8 篇

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

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

Mr. JK ‧ 2023-09-08

0 Like 0 留言 1258 瀏覽

鐵人賽 Vue.js DAY 6

Vue3 - 從零開始學系列第 6 篇

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

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

Mr. JK ‧ 2023-09-06

0 Like 0 留言 1242 瀏覽

鐵人賽 Vue.js DAY 7

Vue3 - 從零開始學系列第 7 篇

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

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

Mr. JK ‧ 2023-09-07

0 Like 0 留言 1184 瀏覽

鐵人賽 Vue.js DAY 9

Vue3 - 從零開始學系列第 9 篇

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

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

Mr. JK ‧ 2023-09-09

0 Like 0 留言 1097 瀏覽

鐵人賽 Vue.js DAY 10

Vue3 - 從零開始學系列第 10 篇

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

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

Mr. JK ‧ 2023-09-10

0 Like 1 留言 1050 瀏覽

鐵人賽 Vue.js DAY 30

Vue3 - 從零開始學系列第 30 篇

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

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

Mr. JK ‧ 2023-09-30

0 Like 0 留言 1011 瀏覽

鐵人賽 Vue.js DAY 14

Vue3 - 從零開始學系列第 14 篇

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

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

Mr. JK ‧ 2023-09-14

0 Like 0 留言 980 瀏覽

鐵人賽 Vue.js DAY 13

Vue3 - 從零開始學系列第 13 篇

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

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

Mr. JK ‧ 2023-09-13

0 Like 1 留言 977 瀏覽

鐵人賽 Vue.js DAY 26

Vue3 - 從零開始學系列第 26 篇

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

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

Mr. JK ‧ 2023-09-26

0 Like 0 留言 956 瀏覽

鐵人賽 Vue.js DAY 12

Vue3 - 從零開始學系列第 12 篇

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

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

Mr. JK ‧ 2023-09-12

0 Like 0 留言 945 瀏覽

鐵人賽 Vue.js DAY 28

Vue3 - 從零開始學系列第 28 篇

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

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

Mr. JK ‧ 2023-09-28

0 Like 0 留言 878 瀏覽

鐵人賽 Vue.js DAY 11

Vue3 - 從零開始學系列第 11 篇

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

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

Mr. JK ‧ 2023-09-11

0 Like 1 留言 865 瀏覽

鐵人賽 Vue.js DAY 29

Vue3 - 從零開始學系列第 29 篇

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

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

Mr. JK ‧ 2023-09-29

1 Like 0 留言 783 瀏覽

鐵人賽 Vue.js DAY 15

Vue3 - 從零開始學系列第 15 篇

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

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

Mr. JK ‧ 2023-09-15

0 Like 0 留言 767 瀏覽

鐵人賽 Vue.js DAY 21

Vue3 - 從零開始學系列第 21 篇

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

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

Mr. JK ‧ 2023-09-21

0 Like 0 留言 740 瀏覽

鐵人賽 Vue.js DAY 25

Vue3 - 從零開始學系列第 25 篇

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

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

Mr. JK ‧ 2023-09-25

0 Like 0 留言 722 瀏覽

鐵人賽 Vue.js DAY 18

Vue3 - 從零開始學系列第 18 篇

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

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

Mr. JK ‧ 2023-09-18

0 Like 0 留言 706 瀏覽

鐵人賽 Vue.js DAY 27

Vue3 - 從零開始學系列第 27 篇

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

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

Mr. JK ‧ 2023-09-27

0 Like 0 留言 672 瀏覽

鐵人賽 Vue.js DAY 16

Vue3 - 從零開始學系列第 16 篇

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

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

Mr. JK ‧ 2023-09-16

0 Like 0 留言 666 瀏覽

鐵人賽 Vue.js DAY 24

Vue3 - 從零開始學系列第 24 篇

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

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

Mr. JK ‧ 2023-09-24

0 Like 0 留言 656 瀏覽

鐵人賽 Vue.js DAY 17

Vue3 - 從零開始學系列第 17 篇

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

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

Mr. JK ‧ 2023-09-17

0 Like 1 留言 646 瀏覽

鐵人賽 Vue.js DAY 19

Vue3 - 從零開始學系列第 19 篇

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

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

Mr. JK ‧ 2023-09-19

0 Like 0 留言 588 瀏覽

鐵人賽 Vue.js DAY 20

Vue3 - 從零開始學系列第 20 篇

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

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

Mr. JK ‧ 2023-09-20

0 Like 0 留言 557 瀏覽

鐵人賽 Vue.js DAY 22

Vue3 - 從零開始學系列第 22 篇

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

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

Mr. JK ‧ 2023-09-22

0 Like 0 留言 529 瀏覽

鐵人賽 Vue.js DAY 23

Vue3 - 從零開始學系列第 23 篇

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

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

Mr. JK ‧ 2023-09-23