Ting's Square 程式寫作之路

[2020] 第12屆鐵人賽Day 15 Vue instance 的 mounted()

昨天在理解Vue的生命週期時提到,Vue在前端處理上有一個透過掛載mounting的hook處理畫面渲染至瀏覽器前的階段。所以我們今天試著在Rails App裡來使用mounted()這個hook實作需求。

Read the Article →

[2020] 第12屆鐵人賽Day 14 Vue instance的生命週期

第12天鐵人賽前在利用event bus傳情書給某個元件的時候,
可能眼尖的客倌會注意到,疑? 這個created()是不是還沒介紹到呢?

Read the Article →

[2020] 第12屆鐵人賽Day 13 Vuex狀態管理

昨天有聊到event bus雖然方便,但是不容易偵錯及維護。 隨著專案變大、元件變得越來越多,元件間的架構越來越複雜,有時候會遇到多個元件需要共用同一份資料的情況…。

Read the Article →

[2020] 第12屆鐵人賽Day 12 跨多層的Vue元件資料傳遞: event bus

這週都在討論props(從外層傳到內層元件)與emit(從內層傳到外層), 如果是平行關係的元件(而非父子關係),要如何進行資料傳遞呢?

Read the Article →

[2020] 第12屆鐵人賽Day 11 Vue元件單向傳遞: $emit 製作todo list

經過昨天介紹$emit可以傳遞自訂的事件給父層元件之後,今天來利用$emit的特性,設計一個3M便利貼風格的to-do list吧!

Read the Article →

[2020] 第12屆鐵人賽Day 10 Vue元件裡由內而外的事件單向傳遞: $emit

元件內的資料傳遞可以說是Vue的大重點之一。 前兩天介紹了由外層父元件傳給子元件, 而今天要來說說如何把子元件由內到外進行「事件的單向傳遞」傳給父元件的Vue instance。

Read the Article →

[2020] 第12屆鐵人賽Day 9 Vue元件裡的props屬性(2)

昨天提到props屬性可以將外層元件的資料,傳遞到內層元件。 舉的例子是傳入特定的author字串給News元件,

Read the Article →

[2020] 第12屆鐵人賽Day 8 Vue元件裡的props屬性(1)

昨天鐵人賽提到了component元件是個堆積木的概念,讓我們可以更容易重複使用。結尾也提到了一個問題:在Vue裡面,不同的元件們該如何傳遞資料?

Read the Article →

[2020] 第12屆鐵人賽Day 7 Rails專案內加上Vue元件

經過了三天的Vue簡單起手式,接著我們要回到Rails專案內實作了。(捲起袖子)
今天來了解一下元件的概念!

Read the Article →

[2020] 第12屆鐵人賽Day 6 Vue instance的computed屬性

昨天我們討論了雙向事件處理: v-model 以及 v-on,讓我們可以跟使用者輸入的資料互動。 (例如對使用者的輸入的暱稱打招呼~)

Read the Article →