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,即可在浏览器中运行。
效果:
网友评论