企業前端框架趨勢論壇之問與答遺珠

先感謝 Will保哥 的邀請,舉辦了一場企業前端框架趨勢論壇的活動,來比較現代主流的三大前端框架 (Angular, Vue, React),因為活動時間限制的關係,下半場讓會眾預先提問的問題,能夠回答的題目並不多 (問券連結點此)。 其中有些我認為還不錯或是有趣的題目,這裡就以 VueJS 推廣者 的角度來談談我對這些問題的看法。

閱讀全文

Vue.js 與 CSS Modules

去年我寫了一篇「從 Vue 來看 CSS 管理方案的發展」來談現代主流前端框架對 CSS 的各種處理方案,相信對 Vue.js 已經熟悉的朋友,都知道 Vue file 裡面是透過「Scoped CSS」也就是 <style> 內的 scoped 屬性來隔離 component 之間的樣式規則。

閱讀全文

利用 Google 試算表 (Google Sheet) 作為外部資料來源

最近收到了奇怪的需求,要把其他單位整理好的 Excel 檔案轉成 JSON 格式,並在網頁上呈現。

由於「懶」是身為碼農的最大美德,當然能用程式解決的問題就不要手動複製貼上,於是想到了可以利用 Google Sheet API 來幫我們解決這類問題。

閱讀全文

VueJS 元件 (Component) 之間資料溝通傳遞的方式

由於 VueJS 採用元件系統 (Component System) 來組織我們的應用程式,元件之間的資料傳遞,一直都是個不容忽視的問題,尤其在過去我們看過太多資料傳遞不當處理的方式,專案隨著時間不斷擴張,變得難以維護,最終導致不得不砍掉重練的悲劇。

閱讀全文

初探 Vue-CLI v3.0

相信不管有沒有用過 Vue 開發的朋友,應該都曾聽過 Vue CLI 這個用來快速建置 Vue 專案的工具。 Vue CLI 這個工具套件現在即將推出 3.0 的版本,當然也有了不少變革與進展,這篇文章就簡單來介紹 Vue-CLI v3 提供了什麼新功能吧。

閱讀全文

寫在 IT 鐵人完賽之後

幾個月前在基於 招生推廣 社群分享,我寫了三篇關於 JavaScript 的 this 系列文,課程招生有沒有因此比較順利我是不知道,反正寫下來也當做自我複習。 三篇文章寫完後,貼到前端社群之後就被不少大大、前輩分享出去。 那時候才發現「喔,原來寫文章還真的有人會看 !」

閱讀全文

What's THIS in JavaScript ? [下]

JavaScript 的 this 系列文終於來到最後一篇了,相信在前兩篇文章的說明下,各位對 this 應該有了基本的認識,而在這最後的篇幅中,我們將著重於 this 與前後文本 (context) 綁定的基本原則 且同時說明 如何決定 this 是誰的順序,期望各位在讀完這系列文章後,對於 this 所扮演的角色,能有更清楚、更深入的理解。

閱讀全文

What's THIS in JavaScript ? [中]

延續上個主題,上回我們提到了 this 是誰,是取決於 function 被呼叫的方式,這次我們繼續來談談 thisfunction 的關係,以及 function 中的 .call().apply().bind() 是如何對 this 來進行操作的。

閱讀全文

What's THIS in JavaScript ? [上]

這系列的主題其實是節錄自去年 (2016) 我在五倍紅寶石開設的課程,講的是 「This」 在 JavaScript 這門程式語言裡所代表的各種面貌。 然而最近無論是社群還是課堂教學,發現仍有不少剛入門的朋友對 JavaScript 的 This 代表的意義不太熟悉,那麼我想整理出這幾篇文章也許可以釐清你對 This 的誤解,反正資料也都還在,不如就整理出來與大家分享順便做個紀錄。

閱讀全文

VueJS 元件載入模板 (template) 的幾種方式

平常已經在使用 VueJS 開發專案的朋友,相信對 Vue Components 的用法已經不陌生, 而 Component 有個相當棒的特性,就是將 HTML 封裝起來,掛載在網頁上的時候,只需要透過自定義的 tag 如 <components></components> 就可以掛載至網頁上。

閱讀全文