iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

Vue.js 什麼意思系列 第 1

Day 01:新手視角

年中才剛攻破 JavaScript 30 挑戰一天一題 JavaScript,過不久因緣際會接了一個專案需要使用框架開發,直接迫使我從 Vanilla.js 新手村晉升到 Vue.js 生態系統,頓時擴展新視野!由於當時是在開發時程有限的情況下立即做中查、做中學,所以初期也曾歷經都已經使用框架了,卻還是不小心蹦出用 querySelector 取得元素節點的原生招數,經過一番寒徹骨,也因而漸漸感受到原生 JavaScript 和 Vue.js 兩者之間的差異。

本系列文章主要透過使用 Vue 2 分享新手視角在執行專案過程中,復刻或模擬遇到各種需求時的解題心路歷程,因此本系列可能不會是連貫式的內容,而是偏向跳躍式的進展節奏,隨著當下所遇情境和待解項目,以兵來將擋之姿使用相應語法或外掛工具完成功能。若有出現生澀用法也請多包涵,也可以留言給予建議讓我能更上一層樓!

資料驅動

事件驅動的原生 JavaScript 利用操作 DOM 來取得節點資料,並在節點上註冊事件後監聽其變化,透過觸發事件執行監聽函式後更新 DOM,以至於畫面上也隨之更新;基於資料驅動的 Vue.js 則是綁定資料與畫面的狀態,更新資料才會更新畫面,而更新畫面就會更新資料。

官網中提到雖然 Vue 本身並非完全遵照 MVVM(Model–view–viewmodel)架構模式,但我們仍可借用此架構來幫助理解。model 代表存放的資料,view 代表顯示的畫面,viewmodel 則作為連結 view 與 model 之間的橋樑,讓 model 與 view 進行雙向綁定進而達到自動同步兩者狀態;另外在 Vue 文件中不時會出現以變數 vm 代表 Vue instance,而 vm 正是 viewmodel 的縮寫。


(圖片來源:Vue.js - Concepts Overview

元件管理

開發中型專案時,常會發現網站中出現不少相同或相似的版面樣式、邏輯判斷等內容,此時使用 Vue.js 便能訓練一下拆解架構與整合管理的技能。

善用元件可以解決相同或相似內容不斷被重複使用的情況,減少重複的程式碼一直出現在專案的各個角落,不僅能省去複製貼上的時間,也能因為集中成元件而便於日後管理與維護。因應不同需求或複用的程度,也使得元件涵蓋的內容量可大可小,過大的元件也能再繼續拆分,因此元件也可以使用巢狀架構來組成。經過仔細的規劃,將各個元件組裝出整個網頁,網站整體就能產生具有組織化的架構。


(圖片來源:Vue.js - Composing with Components

除此之外,還有一群 Vue 的家族成員,在你需要的時候幫助你、支援你,滿足你特定的需求,然後每個成員都有準備一本要念的經給你讀,所以學習過程中充斥著各種文件看不完也得看起來的心境!當然,更多的是使用框架實作後的體會,就讓之後一天一天慢慢發覺 Vue.js 究竟有什麼意思吧!

參考資料


下一篇
Day 02:Vue 個專案先
系列文
Vue.js 什麼意思30

尚未有邦友留言

立即登入留言