版权声明：如果喜欢，就收藏吧 O(∩_∩)O~ https://blog.csdn.net/deniro_li/article/details/82821870
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 地址可用：
-
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，即可在浏览器中运行。
效果：
