iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

少年學Vue,如隙中窺月 系列

張潮的「幽夢影」有段話:「少年讀書,如隙中窺月; 中年讀書,如庭中望月;老年讀書,如臺上玩月。 皆以閱歷之淺深,為所得之淺深耳。」讀書的領會,會隨著人生閱歷的深淺而有所不同;而對一種程式語言的掌握度也是如此,會隨著投入時間的長短而有所不同。本系列文章是紀錄自己初學Vue.js的學習筆記,期許自己完賽後對Vue.js有基本的認識。

鐵人鍊成 | 共 30 篇文章 | 8 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day1] 建立 Vue 開發環境

1.安裝編譯器 VScode 安裝 官方下載 VScode 插件安裝 Chinese (Traditional) Language Pack f...

2020-09-15 ‧ 由 Leo 分享
DAY 2

[Day2] 第一個 Vue 應用程式

先來個 Hello Word 首先記得要先載入 Vue 檔案 <script src="https://cdn.jsdelivr.net/np...

2020-09-16 ‧ 由 Leo 分享
DAY 3

[Day3] MVVM 架構

雖然 Vue.js 有自己介紹它不是採用 MVVM 的框架,但 MVVM 的概念卻影響 Vue.js 的運作,因此讓我們先了解什麼是 MVVM 架構 。 架構示...

2020-09-17 ‧ 由 Leo 分享
DAY 4

[Day4] 資料與畫面綁定的方法

介紹三種資料和畫面綁定常用的方式 v-text 可以直接將資料顯示在綁定的 html 標籤內,與 {{}} 最大的差異在於 v-text 會取代原本標籤內的內容...

2020-09-18 ‧ 由 Leo 分享
DAY 5

[Day5] 物件和陣列

從前面的文章我們可以看出 Vue 是用物件的方式來存取資料,這邊我們就複習一下物件和陣列的差別。 陣列 假設我們今天要計算全班同學的數學成績平均(假設班上只有3...

2020-09-19 ‧ 由 Leo 分享
DAY 6

[Day6] 迴圈(v-for)和條件式(v-if)

通常我們會用 for 迴圈來存取陣列裡面的值,而在 Vue 中,我們則是使用 v-for 指令。 如果我們今天使用 test 陣列來紀錄學生考試成績,以物件形式...

2020-09-20 ‧ 由 Leo 分享
DAY 7

[Day7] 表單資料綁定

今天我們來學習 Vue 如何綁定表單的資料欄位 輸入欄位資料綁定 我們透過 v-model 將變數 text 資料與 input 單行輸入值綁在一起,也透過 v...

2020-09-21 ‧ 由 Leo 分享
DAY 8

[Day8] 動態屬性指令(v-bind)

錯誤方式 如果我們想將資料加進 html 屬性值,比如 img 的 src 中,可能會嘗試使用下列語法,但卻會發生錯誤。打開 console 它要我們使用 v-...

2020-09-22 ‧ 由 Leo 分享
DAY 9

[Day9] 操作頁面行為(v-on)

方法綁定按鈕 假如我們要在 Vue 中使用自定義的方法,此時我們可以在宣告好的 Vue 物件底下加上 methods,而 methods 裡面就可以用物件的方式...

2020-09-23 ‧ 由 Leo 分享
DAY 10

[Day10] 修飾符與簡寫

事件觀念 如果我們建立一個函數 show ,並且將 event 當成它的參數,函數執行在 console 印出 event 參數是什麼,此時我們透過 v-on...

2020-09-24 ‧ 由 Leo 分享