iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

30 天我與 Vue 的那些二三事 系列

透過三十天學習Vue的用法,並實作一個小型專案。

鐵人鍊成 | 共 30 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文 團隊Outcome First 2.0
DAY 1

Day 1 - 前言與主題由來

既然是第一天,不免俗的還是要來自我介紹跟前言一下XD 歡迎來到 30 天我與 Vue 的那些二三事。 我是Grant,一個熱愛資訊科技的理工宅,骨子裡卻又流著文...

2021-09-16 ‧ 由 GrantLi 分享
DAY 2

Day 2 - Vue與MVVM

Vue作為前端三大框架之一,它的重要性已是不可言喻,除此之外,相較於React與Angular,Vue更適合初學者學習。 以下是2020年的state of J...

2021-09-17 ‧ 由 GrantLi 分享
DAY 3

Day 3 - Vue的專案結構

除了可以用CDN(Content Delivery Network)的方式來引入Vue之外,我們還可以使用Vue CLI來快速建立專案,這裡Grant採用第二種...

2021-09-18 ‧ 由 GrantLi 分享
DAY 4

Day 4 - 資料綁定與模板語法

在 Vue 中,使用了基於HMTL的模板,這種模板與允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML...

2021-09-19 ‧ 由 GrantLi 分享
DAY 5

Day 5 - 條件渲染與列表渲染

v-if 條件渲染 Vue 之中還有一個相當實用的功能就是條件渲染了,條件渲染類似於使用 if else 控制狀況,只是現在是控制什麼樣的狀況下進行 DOM 的...

2021-09-20 ‧ 由 GrantLi 分享
DAY 6

Day 6 - Vue事件處理

在 Day 5 中我們提到了Vue中的條件渲染,我們用hardcode的方式指派isShow變數的boolean值,但是,假設今天需求改變,我們想透過一個按鈕來...

2021-09-21 ‧ 由 GrantLi 分享
DAY 7

Day 7 - 計算屬性和監聽器

計算屬性(Computed Property) 當我們今天想針對某一變數做運算或是處理時,可以透過模板內的表達式,但是在模板中放入太多的邏輯會讓模板過重且難以維...

2021-09-22 ‧ 由 GrantLi 分享
DAY 8

Day 8 - 初探Vue Component

在Vue的世界中,是由一個又一個的元件所構成,而我們可以透過自訂元件的方式量身打造客製化的元件並進行複用。 首先,我們先建立一個獨立的Component.vue...

2021-09-23 ‧ 由 GrantLi 分享
DAY 9

Day 9 - 元件的資料傳輸(1)

在Vue中,元件間資料溝通傳遞的方式,一直都是個不容忽視的問題,妥善處理資料流,也是身為工程師的必學課題。 如果沒用元件,當我們今天想要分離多個資料流的問題的時...

2021-09-24 ‧ 由 GrantLi 分享
DAY 10

Day 10 - 元件的資料傳輸(2)

昨天我們提到了如何透過元件區分出獨立的資料流,但問題來了,如果兩個元件的資料需要互通有無呢? 這時候,便是Props出場的時刻。 原始碼可參考以下code sa...

2021-09-25 ‧ 由 GrantLi 分享