iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 2100 瀏覽

鐵人賽 Modern Web DAY 10

玩轉 Storybook 系列第 10 篇

技術玩轉 Storybook: Day 10 Naming components and hierarchy

Naming components 修改一下Story檔案，對應於Component的Title名稱(default export區塊)，就會發現Sidebar...

lala_lee_jobs ‧ 2020-09-25

1 Like 0 留言 1006 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

貓貓工程師 Ting Ting ‧ 2020-09-25

0 Like 1 留言 1009 瀏覽

鐵人賽自我挑戰組 DAY 9

每天來點 Vue.js 吧系列第 9 篇

技術 Vue computed 與 watch 差異

Fixing ... 若是文中有任何錯誤、錯字、想討論的內容，歡迎各位大大不吝鞭笞指正、交流分享，筆者不慎感激 ✦ ✦ ✦ ▶︎ 筆者 github：http...

RURU Tseng ‧ 2020-09-24

0 Like 0 留言 872 瀏覽

鐵人賽自我挑戰組 DAY 10

與Vue相遇系列第 10 篇

技術 Day010-Vue CLI

猶如昨日的期待，我很興奮地按照了Vue的指示：先到node官網下載，下載完成後，立刻安裝2.打開command line並輸入npm install -g...

EdwardXiong ‧ 2020-09-24

1 Like 0 留言 1090 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

貓貓工程師 Ting Ting ‧ 2020-09-24

1 Like 0 留言 2282 瀏覽

鐵人賽 Modern Web DAY 9

玩轉 Storybook 系列第 9 篇

技術玩轉 Storybook: Day 09 Decorators

Decorators Decorator是一種設計模式，把要被裝飾的Story當做參數，傳入裝飾器中，Decorator可以幫Story加上額外的資訊，賦予給S...

lala_lee_jobs ‧ 2020-09-24

0 Like 1 留言 6835 瀏覽

鐵人賽自我挑戰組 DAY 8

每天來點 Vue.js 吧系列第 8 篇

技術 Vue computed 與 method 的差異比較

tags: Vuejs computed 與 method 的混淆在模板中要對資料計算或是轉換時，computed 與 method 往往能替我們做到同樣的事...

RURU Tseng ‧ 2020-09-23

0 Like 0 留言 588 瀏覽

鐵人賽自我挑戰組 DAY 9

與Vue相遇系列第 9 篇

技術 Day09-watch監聽資料

除了，computed和filter呢？如果資料改變，是否Vue能快速因應？ Vue：哈！當然有的呀！我們來看看這個範例：Vue：我知道你對健身的熱愛！今天如果...

EdwardXiong ‧ 2020-09-23

1 Like 0 留言 3617 瀏覽

鐵人賽自我挑戰組 DAY 4

跟 VueJS 認識的30天系列第 7 篇

技術 [DAY07]跟 Vue.js 認識的30天 - Vue 的列表渲染

v-for 就是 JavaScript 裡的迴圈，基於一組資料來製作相同元素區塊。先簡單講一下 JavaScript 裡 for...in 、 for...of...

Celeste ‧ 2020-09-23

1 Like 0 留言 2311 瀏覽

鐵人賽 Modern Web DAY 8

玩轉 Storybook 系列第 8 篇

技術玩轉 Storybook: Day 08 Parameters

Parameter Parameter 是用來定義Stories的靜態metadata(解釋資料的資料)，Parameter能提供給不同的addon去做設定。...

lala_lee_jobs ‧ 2020-09-23

1 Like 0 留言 846 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

貓貓工程師 Ting Ting ‧ 2020-09-23

0 Like 1 留言 5639 瀏覽

鐵人賽自我挑戰組 DAY 7

每天來點 Vue.js 吧系列第 7 篇

技術 Vue computed property `getter` 與 `setter` 的那些事

Computed Property ✐ 在 computed 中設置的 property 稱為 Computed Property 計算屬性，Computed...

RURU Tseng ‧ 2020-09-22

0 Like 0 留言 779 瀏覽

鐵人賽自我挑戰組 DAY 8

與Vue相遇系列第 8 篇

技術 Day08-利用Computed&Filter屬性

又到了與Vue見面的時候，昨日完成了toDoList後，還想知道Vue有什麼特別的~ Vue：相信你已經開始熟悉Vue的操作，聽你上次說，客戶對於數據上，有很長...

EdwardXiong ‧ 2020-09-22

1 Like 0 留言 1056 瀏覽

鐵人賽 Modern Web DAY 7

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

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

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

貓貓工程師 Ting Ting ‧ 2020-09-22

1 Like 0 留言 2466 瀏覽

鐵人賽 Modern Web DAY 7

玩轉 Storybook 系列第 7 篇

技術玩轉 Storybook: Day 07 Write stories

Template & Args 同一個元件的多個story function，都會重複的指定相同的Template，可以拉出一個共用 template...

lala_lee_jobs ‧ 2020-09-22

0 Like 0 留言 2979 瀏覽

鐵人賽自我挑戰組 DAY 6

每天來點 Vue.js 吧系列第 6 篇

技術 Vue template 模板語法

tags: Vuejs Vue template ✐ 還記得前一章節 option 裡的 template 嗎？Vue 提供開發者透過 template 聲明式...

RURU Tseng ‧ 2020-09-21

0 Like 0 留言 2804 瀏覽

鐵人賽自我挑戰組 DAY 4

跟 VueJS 認識的30天系列第 6 篇

技術 [DAY06]跟 Vue.js 認識的30天 - Vue 的條件渲染

在 JS 中我們是利用 if(condition){statement1}else{statement2} 來設定條件並決定執行哪一段陳述式(statement...

Celeste ‧ 2020-09-21

0 Like 0 留言 767 瀏覽

鐵人賽自我挑戰組 DAY 7

與Vue相遇系列第 7 篇

技術 Day07-toDoLis實做

聽完Vue的介紹後，既然這麼好用，趕緊回到家，利用Vue來練習toDoList：因為框架的原因，寫起來十分得心應手。在代辦事項及完成事項來說，只需要透過v-mo...

EdwardXiong ‧ 2020-09-21

1 Like 0 留言 2611 瀏覽

鐵人賽 Modern Web DAY 6

玩轉 Storybook 系列第 6 篇

技術玩轉 Storybook: Day 06 Component Story Format

Story檔案放置位置 Component對應的Story檔案，通常會放置在Component檔案旁邊。Story只會用於開發時期，在Production的bu...

lala_lee_jobs ‧ 2020-09-21

1 Like 0 留言 974 瀏覽

鐵人賽 Modern Web DAY 6

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

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

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

貓貓工程師 Ting Ting ‧ 2020-09-21

0 Like 2 留言 1437 瀏覽

鐵人賽自我挑戰組 DAY 5

每天來點 Vue.js 吧系列第 5 篇

技術 Vue instance 生命週期 ✦

tags: Vuejs Instance Lifecycle 生命週期 ✐ 介紹完如何使用 new Vue({...}) 建構 Vue instance 後，接...

RURU Tseng ‧ 2020-09-20

1 Like 0 留言 2190 瀏覽

鐵人賽 Modern Web DAY 5

玩轉 Storybook 系列第 5 篇

技術玩轉 Storybook: Day 05 CLI Options

以下列出，啟動或是建置 Storybook 時，有哪些可以使用的 CLI Options。 start-storybook 啟動 Storybook Usage...

lala_lee_jobs ‧ 2020-09-20

1 Like 0 留言 1161 瀏覽

鐵人賽 Modern Web DAY 5

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

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

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

貓貓工程師 Ting Ting ‧ 2020-09-20

0 Like 0 留言 2110 瀏覽

鐵人賽自我挑戰組 DAY 4

每天來點 Vue.js 吧系列第 4 篇

技術一切的基礎：Vue instance

tags: Vuejs Vue reactivity system ✐ Vue 引入 data-driven view 的概念，一旦改動 data，與之相對應的...

RURU Tseng ‧ 2020-09-19

1 Like 0 留言 884 瀏覽

鐵人賽 Modern Web DAY 11

忍住不打牌位，只要30天VueJS帶你上A牌系列第 11 篇

技術 Day11 有背過元素週期表，那有看過元件生命週期圖嗎?

元件的生命週期，Vue的官網很貼心，幫你準備好圖示，今天就帶大家來解釋一番。不要在選項property或回調上使用箭頭函數，比如created: () =...

文斯先生 ‧ 2020-09-19 ‧團隊自討苦吃三十天#像極了愛情

1 Like 1 留言 3362 瀏覽

鐵人賽 Modern Web DAY 4

玩轉 Storybook 系列第 4 篇

技術玩轉 Storybook: Day 04 Configure

預設放置組態檔案的目錄 Storybook集中放置組態設定檔案的目錄預設是.storybook，若需要變更路徑及名稱，要在Storybook的CLI指令做設定。...

lala_lee_jobs ‧ 2020-09-19

1 Like 1 留言 1606 瀏覽

鐵人賽 Modern Web DAY 4

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

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

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

貓貓工程師 Ting Ting ‧ 2020-09-19

0 Like 0 留言 3212 瀏覽

鐵人賽自我挑戰組 DAY 3

每天來點 Vue.js 吧系列第 3 篇

技術工欲善其事，必先利其器 ⚙︎ Vue 開發環境建置

tags: Vuejs 如何開始使用 Vue ✐ Vue 一共提供三種不同的方式可供我們使用，依照使用情境的不同可以選擇不同的方式。方法適合場景...

RURU Tseng ‧ 2020-09-18

1 Like 0 留言 868 瀏覽

鐵人賽 Modern Web DAY 10

忍住不打牌位，只要30天VueJS帶你上A牌系列第 10 篇

技術 Day 10 你改我就變#像極了愛情，認識Computed

computed也是可以顧名思義知道它是針對資料做計算然後返回值，在了解computed之前我們先看看官網的說法 computed properties ar...

文斯先生 ‧ 2020-09-18 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 3115 瀏覽

鐵人賽 Modern Web DAY 3

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

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

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

貓貓工程師 Ting Ting ‧ 2020-09-18

技術 玩轉 Storybook: Day 10 Naming components and hierarchy

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

技術 Vue computed 與 watch 差異

技術 Day010-Vue CLI

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

技術 玩轉 Storybook: Day 09 Decorators

技術 Vue computed 與 method 的差異比較

技術 Day09-watch監聽資料

技術 [DAY07]跟 Vue.js 認識的30天 - Vue 的列表渲染

技術 玩轉 Storybook: Day 08 Parameters

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

技術 Vue computed property `getter` 與 `setter` 的那些事

技術 Day08-利用Computed&Filter屬性

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

技術 玩轉 Storybook: Day 07 Write stories

技術 Vue template 模板語法

技術 [DAY06]跟 Vue.js 認識的30天 - Vue 的條件渲染

技術 Day07-toDoLis實做

技術 玩轉 Storybook: Day 06 Component Story Format

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

技術 Vue instance 生命週期 ✦

技術 玩轉 Storybook: Day 05 CLI Options

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

技術 一切的基礎：Vue instance

技術 Day11 有背過元素週期表，那有看過元件生命週期圖嗎?

技術 玩轉 Storybook: Day 04 Configure

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

技術 工欲善其事，必先利其器 ⚙︎ Vue 開發環境建置

技術 Day 10 你改我就變#像極了愛情，認識Computed

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

標記使用者

技術玩轉 Storybook: Day 10 Naming components and hierarchy

技術玩轉 Storybook: Day 09 Decorators

技術玩轉 Storybook: Day 08 Parameters

技術玩轉 Storybook: Day 07 Write stories

技術玩轉 Storybook: Day 06 Component Story Format

技術玩轉 Storybook: Day 05 CLI Options

技術一切的基礎：Vue instance

技術玩轉 Storybook: Day 04 Configure

技術工欲善其事，必先利其器 ⚙︎ Vue 開發環境建置