一、Vue简介
1.1 渐进式框架-Vue
vue官网说:Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue
采用自底向上增量开发的设计。
渐进式我个人理解就是阶梯式向前。vue是轻量级的,它有很多独立的功能或库,我们会根据
我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染,我就
只用vue的声明渲染,而我们要用他的组件系统,我们可以引用它的组件系统。
vue的渐进式表现为:
声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具
1
1.2 Vue两个核心点
1.2.1 响应式数据绑定
当数据发生变化是,vue自动更新视图。
它的原理是利用了 Object.definedProperty 中的setter/getter 代理数据,
监控对数据的操作。(这就是为什么vue不支持ie8 以及更早的ie浏览器的原因)
1.2.2 组合的视图组件 ###
ui页面映射为组件书
划分组件可维护、可重用、可测试
1.3 虚拟Dom
js的运行速度已经很快了,然而大量的DOM 操作就会变得很慢,但是前端本身就是要通过
JS处理DOM来更新视图数据的。这样在更新数据后会重新渲染页面,这样就造成在没有
改变数据的地方也重新渲染了DOM节点。这样性能方面就会很受影响。
利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM。
当数据发生变化时,能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。
vue就是利用了这一点。(vue 渲染组件的步骤图:)
二、MVVM模式
我们可能经常听说的有MVC模式和MVVN模式。
angularJS就是所谓的 MVC 模式的框架,model 、view、controller。
而vue 是 MVVM 模式的框架:
M: model (数据层,也就是指数据(前端是js))
V:view ( 也就是指DOM层 或用户界面 )
VM : view-model (处理数据和界面的中间层,也就是指Vue)
三、第一个Vue程序
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
})
</script>
</html>