Ting's Square 程式寫作之路

[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 →

[2020] 第12屆鐵人賽Day 5 v-bind, v-model, v-on

昨天討論了單向資料流的鬍子語法,可以讓我們把Vue實例裡的資料流向html (View)。
但如果要將資料綁定HTML標籤屬性的時候,該怎麼辦呢?
舉例🌰而言,如果我們想把HTML的placeholder綁上vue instance的data屬性yourname,這個時候,我們可以使用v-bind

Read the Article →

[2020] 第12屆鐵人賽Day 4 Vue的單向資料流: 鬍子語法

昨天經過辛苦的環境安裝(擦汗),可以在Rails專案寫Vue了!先來個簡單的Vue起手式緩緩心情~
在第2天我們有提到,Vue.js 官網 這張MVVM架構的示意圖: Model是資料邏輯: View是使用者介面; VM代表的是View Model

Read the Article →

[2020] 第12屆鐵人賽Day 3 在Rails專案產生Vue app

昨天的鐵人賽中,我們對於Rails的MVC架構和Vue.js的MVVC設計架構做些了解,對未來專案的前端、後端的檔案位置及有個初步的概念。那麼今天就直接來開個新專案吧!

Read the Article →

[2020] 第12屆鐵人賽Day 2 Rails 與 Vue 的架構介紹

現在大型商業購物網站、以及社群網站的規模開始增加,需要加入更多的商業邏輯和功能,為了讓網站工程師專業分工更容易,優良的架構變得越來越重要。(就像是軟體工程傳說中的提高內聚性,降低耦合性 - 另一個非常專業的Topic!)

Read the Article →

[2020] 第12屆鐵人賽Day 1 Vue.js + Rails 開賽宣言

聽說javascript快統治全世界了!(驚)
漸漸地、後端工程師也開始把javascript框架變成必須熟悉的標準配備!

Read the Article →