iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

5
Modern Web

「小孩才做選擇,我全都要。」小白也能輕鬆瞭解的 Vue.js 與 D3.js 。系列 第 37

「小孩才做選擇,我全都要。」章節總整理 & 一些 Side Project 範例。

感想

時隔多日來發最後一篇章節整理,首先當然要慶祝自己達成鐵人賽啦!

寫文過程一路以來看了蠻多文章,想過很多問題、遇到很多困難,透過不斷的反思、自己找答案,對於我來說,身為工程師的驕傲就是沒有解決不了的問題,只有時間與設備限制的阻礙,而我也努力不斷地印證這句話。

其中我想最大的收穫大概是認識了一些一起寫文的朋友,共同完成三十天發文的這項壯舉!!

本系列仍有許多地方需要改進,這些經驗都將成為下次發系列文的養分!很感謝各位 IT 朋友的閱讀、訂閱與指教!若有任何問題也還煩請大家留言告知!我們明年相見!


Vue-cli 範例

後來其實陸陸續續做了幾個 Side Project,雖然專案項目都不大,不過也就是因為不大(?),所以要弄出類似的東西也是很快的一件事情。總之,想要來練練手的話也都歡迎 fork 一份回去玩玩喔!

這是一款能將正體中文轉成「Shai3-Nai1」體的翻譯器。

目的在於搜尋六角學院鼠年全馬鐵人挑戰參賽之文章,並基於六角釋出的 API 所開發的搜尋器。

偷渡一下自己辦的社群,這個專案主要是做一個簡易的形象官網,後續應該還會繼續補一些東西進去。


學習重點整理

針對本次系列文的學習重點如下:

Vue.js

  • 基礎樣板語法概念,知道如何使用指令撈出實體化中的資料 data
  • 生命週期的整體概念,知道元件從初始化到資料載入的過程,以及啟用對應的生命週期鉤子。
  • 元件傳遞,包含父層傳子層、子層傳父層以及跨越這兩者的層次要如何傳遞。
  • 瞭解 slot 用法,加強元件傳遞的用法。(可以思考今天專案上如果有 SSR 需求時要如何藉由 slot 用法與元件合作?)

Vue-cli
何時踏入 .vue 檔與 Vue-cli 主要有兩種學習路徑,本篇採用的是第一種方式:

  1. 自己先實體化過一次 Vue.js 再碰 Vue-cli 來瞭解 Vue-cli 透過 webpack 幫我們調整了哪些東西。
  2. 直上 Vue-cli 再回頭看看自己缺乏了 Vue.js 那些概念。

D3.js

  • 瞭解 DOM 概念,主要是 D3.js 是透過操作 DOM 中的 SVG 標籤來繪製圖形。
  • 知道如何使用 datadatum
  • 知道 enter(), exit() & update() 概念與觸發條件。

D3.js in Vue.js

  • 瞭解 Vue.js 在處理的 DOM 概念
  • 瞭解 D3.js 是藉由操作 DOM 來繪製圖形
  • 熟悉上面兩個概念後 => 知道要避免 D3.js 操作的 DOM 在 Vue.js 裡面失控
    • => 將 D3.js data 挪至 Vue.js 實體裡的 data(由 Vue.js 驅動 D3.js 所需資料來讓更新 D3.js 所產出的 SVG。
    • => 包裹在 Vue component 裡可以有效控制 D3.js 繪製範圍。

章節整理

序章

Vue.js

D3.js

Vue-cli


上一篇
[ Vue-cli ] Router
系列文
「小孩才做選擇,我全都要。」小白也能輕鬆瞭解的 Vue.js 與 D3.js 。37

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-02-16 16:47:36

恭喜完賽!! 好厲害!!

很棒! 感謝分享!

我要留言

立即登入留言