iT邦幫忙

鐵人檔案

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

「VR 」前端後端交響曲 - 30天開發 Vue.js feat. Ruby on Rails即時互動網站 系列

聽說:Javascript快統治全地球了!(誤)
聽說:javascript因為有了最近大熱門的前端框架御三家(React、Vue、Angular),
最近軟體公司的職缺都會在求職條件及加分項目中提到目前的三大框架!

相對容易上手的前端框架Vue.js,要如何整合網站後端開發最迅速的框架Rails呢?
讓我們用30天來探索及實作~來一場「VR」Vue.js feat. Ruby on Rails前端後端交響曲吧!

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

[VR 前後端交響曲Day1] 開賽宣言:越來越火紅的Vue.js和Rails兩大框架

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

2020-09-16 ‧ 由 Ting Ting 分享
DAY 2

[VR 前後端交響曲Day2] Rails 與 Vue 的架構介紹

Day 2 Rails 與 Vue 的架構介紹 現在大型商業購物網站、以及社群網站的規模開始增加,需要加入更多的商業邏輯和功能,為了讓網站工程師專業分工更容易,...

2020-09-17 ‧ 由 Ting Ting 分享
DAY 3

[VR 前後端交響曲Day3] 在Rails專案產生Vue app

1. Rails專案起手式 在昨天的鐵人賽中,我們對於Rails的MVC架構和Vue.js的MVVC設計架構做些了解,對未來專案的前端、後端的檔案位置就比較能夠...

2020-09-18 ‧ 由 Ting Ting 分享
DAY 4

[VR 前後端交響曲Day4] Vue的單向資料流: {{鬍子語法}}

昨天經過辛苦的環境安裝(擦汗),可以在Rails專案寫Vue了!先來個簡單的Vue起手式緩緩心情~ 在第2天,我們有提到,Vue.js 官網 這張MVVM架構的...

2020-09-19 ‧ 由 Ting Ting 分享
DAY 5

[VR 前後端交響曲Day5] 單向資料綁定(v-bind)與雙向事件處理(v-on)

昨天討論了單向資料流的鬍子語法,可以讓我們把Vue實例裡的資料流向html (View)。 但如果要將資料綁定HTML標籤屬性的時候,該怎麼辦呢? 舉例而言,如...

2020-09-20 ‧ 由 Ting Ting 分享
DAY 6

[VR 前後端交響曲Day6] Vue元件中的computed屬性

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

2020-09-21 ‧ 由 Ting Ting 分享
DAY 7

[VR 前後端交響曲Day7] 在Rails專案內加上Vue元件

經過了三天的Vue簡單起手式,接著我們要回到Rails專案內實作了。(捲起袖子) 今天來了解一下元件的概念! 元件component:堆樂高積木的概念 在開發...

2020-09-22 ‧ 由 Ting Ting 分享
DAY 8

[VR 前後端交響曲Day8] 由外到內:Vue元件裡的props屬性(1)

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

2020-09-23 ‧ 由 Ting Ting 分享
DAY 9

[VR 前後端交響曲Day9] 由外到內:Vue元件裡的props屬性(2)

昨天提到props屬性可以將外層元件的資料,傳遞到內層元件。 舉的例子是傳入特定的author字串給News元件, 但是一般來說的網頁使用情境,不太可能會把資料...

2020-09-24 ‧ 由 Ting Ting 分享
DAY 10

[VR 前後端交響曲Day10] Vue元件裡由內而外的事件單向傳遞: $emit

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

2020-09-25 ‧ 由 Ting Ting 分享