什麽是Vue.js

Vue.js是一個開源Model-view-viewmodel(MVVM)設計模式的 JavaScript框架，能用它來建立使用者界面與single-page applications。使用者界面我們已經很熟悉，在React是什麽這篇有提到，它扮演著人機溝通的角色。而Model-view-viewmodel是什麽東西呢？翻譯成中文是模型-視圖-視圖模型說起來很饒舌，電腦科學常用抽象的詞聼起來像很高深的學問其實不然，如果你是電腦科學本科生，想看詳細的解釋，可以參考wiki上的Model–view–viewmodel。我不喜歡抽象的詞，比如欣賞抽象畫，你看到的東西跟我看到的不一樣，這樣意見很難達到一致。要是說熊貓這個動物，你我都知道那是個什麽動物。

MVVM簡單解釋

簡單的解釋MVVM，這個架構能將圖形界面與邏輯分離，讓開發時更容易合作，界面設計師司圖形界面設計的部分，軟體設計師司邏輯的部分。什麽是圖形界面呢？拿滑手機看新聞來説，手機畫面（圖形界面）上面有許多功能按鈕等著我們去使用（交互），手機畫面就是圖形界面。這樣和之前在React是什麽這篇說手機畫面是使用者界面豈不矛盾，使用者界面像是在圖形界面的上層，擔任人與機器溝通的角色，它可以是圖形化，也可以是非圖形化，Google助理的語音輸入就是非圖形化界面的一例，其中用到的五感器官中的為耳，嘴巴問語音助理問題，耳朵聼語音助理的回復。將來如果科技更進步，可以讓剩下的感管器官鼻、舌、皮膚與機器溝通吧。

拿之前在React是什麽這篇畫的圖為例，Google助理能讓使用者使用語音輸入指令（使用者界面），以得到回應（交互）。這個例子舉例不太好，為什麽呢？因爲MVVM架構用來將圖形界面與邏輯分離，語音輸入沒有一個圖形界面，所以不適用。

single-page application是什麽

single-page application是一個網頁應用，在網站與瀏覽器交互時，動態寫入新資料到原頁面，而不用重新載入。目的是反應更快讓網頁像個原生應用。

它就像我在組裝麵包超人玩具一樣，辛苦的組了一個身體，在加上一個頭就完成了。我不想把身體拆掉在重新組裝，就拿身體來換上其他頭較省力。

在 Instagram 查看這則貼文

換頭套？ Change doll head? . Double tap and share 💪 💡(follow @bigfoolbear for more) #art #illustration #draw #artist #sketch #instaart #sketcheveryday #photooftheday #anpanman #mickeymouse #winniethepooh

bigfoolbear（@bigfoolbear）分享的貼文 於 PDT 2020 年 4月 月 10 日 上午 2:38 張貼