帶你進入 Vue.js 的世界
阿新 • • 發佈：2018-12-11
Vue.js 擁有簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用 。這裡的漸進式指的是可以一步一步地，有階段地來使用 Vue.js。
它提供了現代 Web 開發中常見的高階功能，比如：
- 解耦檢視與資料
- 可複用的元件
- 前端路由
- 狀態管理
- 虛擬 DOM
1 MVVM 模式
MVVM（Model-View-ViewModel）模式。 MVVM 模式是從經典的 MVC 模式衍生而來 。 當 View （檢視層）發生變化時，會自動更新到 ViewModel （檢視模型），反之亦然， View 和 ViewModel 之間同過資料雙向繫結（ data-building ）建立聯絡 。
因此，開發者只需關心資料即可， DOM 維護的事情交由 Vue 處理。
2 第一行 Vue 程式碼
我們可以通過使用 CDN 方法來載入 Vue.js，來實現快速體驗。目前有以下這些 CDN 地址可用：
這裡推薦使用 WebStorm，來開發 Vue 專案。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的好友列表</title> </head> <body> <div id="app"> <ul> <li v-for="friend in friends">{{friend.name}}</li> </ul> </div> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <script> new Vue({ el:'#app', data:{ friends:[ {name:'Jack'}, {name:'Lucy'} ] } }) </script> </body> </html>
在 WebStorm 中使用 ctrl+shift+F10，即可在瀏覽器中執行。
效果：
