Vue.js 簡介

Blog / 2021-01-06

今天想聊一下 Vue.js 跟 Javascript 在開發上的差異。
因為 Vue.js 是一個框架,自己塑造了一個新的世界觀。如果用 Native Javascript 的思維來寫 Vue.js 的話,一定會有很多腦筋打結的地方 XD。

Taker 覺得,Vue.js 在底下幾個部分有明顯的不同:

  • data 與 methods 集中管理
  • 使用 data 控制畫面
  • HTML 的架構包含了變數、邏輯
  • 最後整理成 component(好開發、好維護)

底下說明各自的細節:

data 與 methods 集中管理

通常我們在寫 Javascript 的時候,需要自己整理常用的 data、以及常用的 methods
但是 Vue.js 在這部分已經幫我們準備好了,都擺在一開始建立 Vue Instance 的地方。
集中管理,很方便。

使用 data 控制畫面

這點我覺得很有趣,跟之前撰寫 Javascript 的體驗完全不同!
在寫 Javascript 或是 jQuery 的時候,我們通常會直接對 DOM tree 做處理。會 Traversing / DOM manipulate 等等。

但 Vue.js 在這部分很單純,直接用 data 控制。
我們可以在 HTML template 直接用 if 配 data 控制某段 HTML 要不要出現;也可以用 for loop 直接把我們的 array / object 印到畫面上。

HTML 的架構包含了變數、邏輯

一般我們會喜歡 HTML、CSS、JS 各自分開寫,比較乾淨,也比較好維護,

但 Vue.js 把一點邏輯跟變數參入 HTML。
乍看之下覺得 code 很髒,但卻讓我們做 HTML template 的時候更方便,把資料跟畫面做很好的整合。
省去我們在 Javascript 裡要寫一堆處理 DOM 的程式碼。

最後整理成 component:好開發、好維護

Component 這類的概念,在各種框架裡面都很夯。
每一個 Component 都像是一個小網頁,各自把每一部分的功能做出來。
很像拼積木、拼樂高,先把不同的組件做出來,再合併起來,最後就變成一個完整的產品。

以上是 Taker 發現 Vue.js 的一些特點,大家覺得還有什麼不一樣的地方嗎?

本內容擷取自 Vue.js 123
有興趣學習 Vue.js 的朋友歡迎去看看喔:)

background

訂閱「網頁15天」最新技術分享

訂閱