fbpx

主題:如何藉由學習框架(Vue JS),培養無可取代的工程思維😎

 

小白🙆‍♀️心中os:當初學 React 純粹是因為「覺得需要而學」,現在認識 Vue 是為了滿足自己「想重新認識一項事物」的願望,就是這麼存粹,但不浪漫… 🌹

 

你學過框架嗎?還是說你已經是框架老手?

以往的我,對於 Vue.js 的理解僅限於 JS 的框架(沒錯! 僅此而已🙃

今天…我誤打誤撞,撞見了Vue的新世界,不僅讓我更深入地認識框架,更深化了我的學習思維

 

現在我希望點進此文章的每個你,利用10秒鐘,重新思考學習框架,甚至是學習程式的初衷

… … 

… … … 

… … … … 

… … … … … 

(10秒到!)

先把答案放心裡,請君聽我說下去👂

 

回想剛踏入前端的你,一定、必定、非得要知道的 3 大天王:HTML,CSS, Javascript

再來,有單挑過天王們的經驗後,接著就開始接受 Javascript 框架的荼毒,多數人都盲著用,秉持著:「會寫會貼就好」&「動得了就行」的態度學習。

 

當然,這也不全然是壞事。學習不像吃飯,無法一次吃得精光(無法在剛開始就全盤掌握學習的大要和宗旨),也無法端倪每一粒米(事事求精),只能邊吃邊品嚐,或是邊吃盡量消化… 吃中嚐;做中學,這是人類吃和學的極限。

 

論框架,它既是一門技術又是一項長久積累而成的結晶產物。從框架之中我們可以見到前輩們的智慧,更可以了解程式語言的特性和缺失(不便之處)

 

因此,學習框架可以說是「學習一項新技術」。和學習任何一項技術相同,學習框架必須從最根本的開始研究, 以下以 「學習 Vue.js」 為例

 

First step:進入 Vue 官網,找到 「Learn」底下 documentation 的 「Guide」

Second step:了解 Vue.js 的創建目的,建構好環境(官網是用 Scrimba 示範)

Third step:閱讀&隨著 Guide 的引導做最基本的操作

 

就~  這麼簡單~   學習順序永遠都是先官方再秘笈、先基礎在上延伸補強(aka. 工程學習思維)

 

清楚 Vue.js 的「輪廓」和「基本操作的方式」後,有「需要」(necessity is the mother of invention嘛!)再針對所需之處加深加廣才會是較有效率&符合大腦吸收狀況的學習方式

 

文章一開始提及的直播,老實說並未帶給我太大實質上的 Vue.js 技能提升,但它提醒了我如何學得聰明(應用工程思維於學習之上)。像是概念的統整,以條列式的形式統整重點

Example: 

  1. data binding  綁定資料

    {{  }} 

  1. attribute binding  綁定屬性

    v-bind

  1. conditionals/ loops 條件/迴圈

    v-if/ v-for 

  1. 2-way binding 雙向綁定

    v-on:click/ v-model

  1. components 元件

 

這樣的方式就是一個很優質的知識呈現方式,讓重點概念浮現,次要概念附屬在重點之下(類似DOM tree~)

Basic 的列點結束後,就要針對手上專案或是小成品的功能需求做自我延伸,譬如進階版 Vue.js 的列點可能長這樣(每個人的列點都會有不同):

  1. template syntax
  2. class and style binding
  3. event handling
  4. components basics
  5. cookbook

 

接著再根據列舉主題去深入查資料、試寫,深入其中。這樣才會是較明智&有方向的學習模式

 

💡統整:

  1. 強烈學習動機:「想要學」<「需要學」<「必須學」 (無論如何都要秉持著「反覆思考」和「自問自答」原則,去親力親為找尋答案)
  2. 釐清學習物本體:先去展望要學習的事物的藍圖,不急於在短時間能產出驚人的成果
  3. 重思考、理解:程式語言太多人懂,會使用框架的人也不計其數,重點是你的「想法」(有想要實踐的草圖)[切莫為學而學 或 純粹為找工作而踏入前端] 和「思維」,盡可能地在學習中反問 2W1H (What/ Why/ How)。這裡奉勸大家不要死背硬記,動腦&理解才是上策
  4. 框架是為了便利而生,助有想法的各位們一臂之力(省時省事,不再需為無聊細節浪費時間),切勿本末倒置
  5. 建議:
  1. 做中學,可能有興趣的領域都嘗試看看
  2. 不要停留在基礎但也不能因此忽略它的重要性
  3. 由「結果」學習可能會有意想不到的收穫

 

程式小白🙆‍♀️在此與前端之路同道人共勉之💪

 

__________________________________________________________

 

假如有人好奇我聽了哪場直播,這裡附上 hyperlink

額外學習資訊參考:UdemyGithub、Youtube tutorial(國內國外

 

如果喜歡這樣的統整,拜託底下留言讓我知道🙏

我會根據留言反應調整之後的文章方向~感恩大家看到這裡!

💃小白下台一鞠躬💃

iris

iris

我是踏踏實實的程式小白🙆‍♀ 今年開始學習 JS 和 React~ 這邊專放我學習時的筆記和心得📒 如果喜歡我的文章不妨加入我一起學習💪 營造有趣學習程式大圈圈

Leave a Reply