帶你進入 Vue.js 的世界
摘要：
Vue.js 擁有簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用 。這裡的漸進式指的是可以一步一步地，有階段地來使用 Vue.js。
它提供了現代 Web 開發中常見的高階功能，比如：
解耦檢視與資料
可複用的元件
前端路由
狀態管理
虛擬 DOM...
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 地址可用：
-
BootCDN: ofollow,noindex">https://cdn.bootcss.com/vue/2.2.2/vue.min.js
-
unpkg： https://unpkg.com/vue/dist/vue.js , 會保持和 npm 釋出的最新的版本一致。
-
cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
這裡推薦使用 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，即可在瀏覽器中執行。
效果：
