在正式开始学习Vue之前,你需要知道,Vue是什么?

vue

为什么要用vue

传统的网页形式是浏览器脚本语言js连接了各种各样的Html,css,但缺乏正规的组织形式,比如在页面元素非常多,结构很庞大的网页中,数据和视图如果全部混杂在一起,像传统开发一样全部混合在HTML中,那么要对它们进行处理会十分的费劲,并且如果其中有几个结构之间存在藕断丝连的关系,那么会导致代码上出现更大的问题,比如juqery中使用的

$('#xxx').parent().parent().parent()

一开始很好查找,但当页面结构发生变化,也就是说DOM的关联与嵌套层次要发生改变,那么之前的代码可能就会变成这样了:

$('#xxx').parent().parent().parent().parent().parent()

这样产品迭代后,对dom节点的查找操作等行为会有很大的性能损耗。

vue是一款友好的、多用途的且高性能的js框架,它可以帮你创建可维护性和可测试性更强的代码库。官网对vue的优点描述是这样的:

在正式开始学习Vue之前,你需要知道,Vue是什么?_第1张图片

1.易用:

学习曲线平缓,api简洁,容易上手。学习过程较react来说比较容易,不那么痛苦

2.灵活:

如果你已经有一个现成的服务端框架,你可以将vue作为其中的一部分嵌入,带来更加丰富的交互系统 ,或者你希望将更多业务逻辑放到前端来实现,那么vue的核心库及其生态系统也可以满足你的各式需求,vue允许你将网页分割成可复用的组件,每个组件都可以包含自身的html,css,js文件,以用来渲染网页中相应的地方。

3.高效:

虚拟dom: 其数据全部在内存中,只有js引擎参与其中
而真实dom会有浏览器渲染层在其中
你的知道浏览器的虚拟DOM与真实DOM的区别(注意:需不需要虚拟DOM,其实与框架的DOM操作机制有关):

虚拟DOM不会进行排版与重绘操作

虚拟DOM进行频繁修改,然后一次性比较并修改真实DOM中需要改的部分(注意!),最后并在真实DOM中进行排版与重绘,减少过多DOM节点排版与重绘损耗

真实DOM频繁排版与重绘的效率是相当低的

虚拟DOM有效降低大面积(真实DOM节点)的重绘与排版,因为最终与真实DOM比较差异,可以只渲染局部(同2)

使用虚拟DOM的损耗计算:

总损耗 = 虚拟DOM增删改 + (与Diff算法效率有关)真实DOM差异增删改 + (较少的节点)排版与重绘

直接使用真实DOM的损耗计算:

总损耗 = 真实DOM完全增删改 + (可能较多的节点)排版与重绘 只能说 虚拟DOM 只是减少了一些情况下, 对真实DOM操作的 次数.

虚拟DOM只是个 JavaScript object

它会在 对比 后再选择更新哪些DOM, 而不会像有些时候, 全部删除再重建.

获取/修改 大量DOM元素的时候,就会先在 虚拟DOM 里 取值 对比.

虚拟dom是在内存中维护的dom树,是在实体dom之上的一层抽象。有了这层抽象,不管是查询操作还是修改操作,都是先操作内存中的虚拟dom,在这个过程中可以做很多优化,从而减少对实体dom的操作。举两个例说明,1. 查询一个text标签的值,可以直接从虚拟dom中查找得到,根本不需要查询实体dom。2. 在一次操作中,要修改列表中的两条记录,要修改的元素会先把变更同步到虚拟dom上,然后根据最新的虚拟dom,一次性渲染出最终的实体dom,如果没有虚拟dom,两条记录的修改至少要对应两次对实体dom的操作,显然操作实体dom越频繁,网页速度越慢。

对于vue.js的Virtual DOM,目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架,引入Virtual DOM会加大Vue.js本身的代码尺寸,也会消耗更多CPU(手机上会更耗电)(注意:消耗更多的CPU并不意味着会更卡,因为JavaScript计算是后台计算,他的计算量还不至于让DOM操作变得卡顿),并且在操作单个DOM元素的时候,反而多了一道计算工序,会更慢。但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素,肯定操作的DOM量级普遍较大,平均一下还是比较划算的。

4.社区和第三方组件库丰富

社区
论坛(https://forum.vuejs.org/) - 提问答疑的最好地方。
Gitter(https://gitter.im/vuejs/vue) - 开发者聊天室。在这里你可以提问,不过最好在论坛提问,因为论坛有版块。
Github(https://github.com/vuejs) - 报告问题,提交请求,为你所做的任何贡献表示深深感谢!
vue组件库:
element-ui Mint UI
muse-ui

vue是什么

1.Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

这里渐进式框架也就是上边vue特点中的灵活一项,使用vue,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;

比如说刚开始用数据绑定做一个表单,后来控制整个页面的dom,再后来用router控制路由做单页应用,组件配合,vuex与数据配合等等,使用vue,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用。
在正式开始学习Vue之前,你需要知道,Vue是什么?_第2张图片

2.Vue 只关注视图层, 采用自底向上增量开发的设计。

视图层:
那么HTML中的DOM其实就是视图,一个网页就是通过DOM的组合与嵌套,形成了最基本的视图结构,再通过CSS的修饰,在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分,就需要用到JavaScript来接受用户的交互请求,并且通过事件机制来响应用户的交互操作,并且在事件的处理函数中进行各种数据的修改,比如说修改某个DOM中的innerHTML或者innerText部分。

我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层。

MVVM
是Model-View-ViewModel 的缩写,由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。
在正式开始学习Vue之前,你需要知道,Vue是什么?_第3张图片

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。

MVC
控制器负责对模型中的数据进行更新,而视图向模型中请求数据;当有用户的行为触发操作时,会有控制器更新模型,并通知视图进行更新,在这时视图向模型请求新的数据

3.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

响应的数据绑定:
就是vue.js会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系,在图上是以input 标签的v-model属性来声明的,因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue.js测试 -</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" name="" value="" placeholder="在这里输入文字,下面会跟着变化" v-model="message">
		<hr>
		<p>{{ message }}</p>
	</div>
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue!'
		  }
		})
	</script>
</body>
</html>

组合的视图组件:
Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑).

组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行(组件化)

组件化优点:
提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于协同开发

你可能感兴趣的:(Vue,javascript,vue.js,css,html,jquery)