目录
一 点睛
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue只关注视图层,采用自底向上增量开发的设计。
Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
Vue的核心可只关注于视图层,不仅容易上手,还便于与第三方库(vue-router,vue-resource,vuex)或既有项目整合。
二 MVVM模式的实现者
- Model:模型层,在这里表示JavaScript对象。
- View:视图层,在这里表示DOM(HTML操作的元素)。
- ViewModel:连接视图和数据的中间件,Vue.js就是MVVM中ViewModel层的实现者.
在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个Observer观察者。
ViewModel能够观察到数据的变化,并对视图对应的内容进行更新。
ViewModel能够监听到视图的变化,并能够通知数据发生改变。
到此,我们明白,Vue.js就是一个MVVM的实现者,它的核心就是实现了DOM监听与数据绑定。
三 为什么要使用Vue.js
- 轻量。压缩后只有20多k。
- 移动优先。
- 容易上手,学习曲线平稳,文档齐全。
- 吸取了Angular(模块化)和React(虚拟DOM)的长处,并拥有自己独特的功能,如计算属性。虚拟DOM与DIFF算法描述如下:它是Vue的核心。Vue之所以高效,就是虚拟的dom和diff算法,vue不通过修改dom树来达到修改的效果,而是直接在页面上改那个元素,此时这个元素就是一个虚拟的dom。那么vue怎样改呢?通过diff算法,计算出虚拟的dom修改后和修改前的区别,然后在虚拟dom的原基础上进行修改,这样效率就大大提升了。
- 开源,社区活跃度高。
四 入门实例
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入门实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
2 效果
五 集成场景
1 单页面、多页面引入Vue.js
2 复杂单页面应用Vue cli工具。
六 开发工作流
1 需求调研(确定需求)
2 交互设计、逻辑设计、接口设计
3 代码实现、测试运行、线上部署
七 参考资料
Webpack 入门教程:http://www.runoob.com/w3cnote/webpack-tutorial.html