<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
vue介绍:
vue是一个兴起的前端js库,是一个精简的MVVM。
从技术角度讲,Vue.js 专注于 MVVM 模型的 ViewModel 层。
它通过双向数据绑定把 View 层和 Model 层连接了起来,通过对数据的操作就可以完成对页面视图的渲染。
当然还有很多其他的mvmm框架如Angular,React都是大同小异,本质上都是基于MVVM的理念。
然而vue以他独特的优势简单,快速,组合,紧凑,强大而迅速崛起
1.Vue比JQuery减少了 DOM 操作
在这里我先提出一个问题,为什么要较少DOM操作????
回答:当DOM操作影响到布局的时候,浏览器的渲染引擎就要重新计算然后渲染,越多的DOM操作就会导致越多的计算,自然会影响页面性能,所以DOM操作减少是最好的
那Vue又是怎么样减少DOM操作的呢?
Vue通过虚拟DOM技术减少DOM操作。什么是虚拟DOM?使用js对象模拟DOM,在操作过程中不会直接操作DOM,等待虚拟DOM操作完成,仅仅比较开始和结束状态虚拟DOM有哪些变换,最终根据结束状态虚拟DOM去操作DOM。
2.Vue支持双向数据绑定
数据绑定有单向数据绑定和双向数据绑定。
什么是单向数据绑定?
单向数据绑定即一方面只受另一方面影响,却无法影响另一方面。前端常说的单向数据绑定一般都指数据影响页面,而页面不影响数据。
什么是双向数据绑定?
双向的意思即两个方面相互影响,前端来说,即数据影响页面,页面同时影响数据。例如,在 MVVM 框架中,View(视图) 和 Model(数据) 是不可以直接通讯的,在它们之间存在着 ViewModel 这个中间介充当着观察者的角色。当用户操作 View(视图),ViewModel 感知到变化,然后通知 Model 发生相应改变;反之当 Model(数据) 发生改变,ViewModel 也能感知到变化,使 View 作出相应更新。
3.Vue支持组件化
组件化的概念
Web 中的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用.
页面就是有一个个类似这样的部分组成,比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器,组件自由组合形成功能完善的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。
组件化的特性
高内聚性,组建功能必须是完整的,如我要实现下拉菜单功能,那在下拉菜单这个组件中,就把下拉菜单所需要的所有功能全部实现。
低耦合度,通俗点说,代码独立不会和项目中的其他代码发生冲突。在实际工程中,我们经常会涉及到团队协作,传统按照业务线去编写代码的方式,就很容易相互冲突,所以运用组件化方式就可大大避免这种冲突的存在、
每一个组件都有子集清晰的职责,完整的功能,较低的耦合便于单元测试和重复利用。
组件化的优点
1.提高开发效率 2.方便重复使用 3.简化调试步骤 4.提升整个项目的可维护性 5.便于协同开发
-->
</body>
</html>