vue的初步学习以及总结

一、vue.js是什么

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

 

二、Vue.js的特性

1.轻量级的框架

2.双向数据绑定

3.指令

4.插件化

 

三、vue.js的虚拟dom和双向数据绑定

1.虚拟dom（文档对象模型）

1）介绍：DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

2）为什么需要虚拟DOM

DOM是很慢的，其元素非常庞大，页面的性能问题大部分都是由DOM操作引起的。如果对前端工作进行抽象的话，主要就是维护状态和更新视图；而更新视图和维护状态都需要DOM操作。近年来，前端的框架主要发展方向就是解放DOM操作的复杂性。

 

3）虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。

·提供一种方便的工具，使得开发效率得到保证

·保证最小化的DOM操作，使得执行效率得到保证

 

4）Vue2.x的虚拟DOM diff原理

即仅在同级的vnode间做diff，递归地进行同级vnode的diff，最终实现整个DOM树的更新

·优先处理特殊场景

头部的同类型节点、尾部的同类型节点:(这类节点更新前后位置没有发生变化且位置很明确所以不用移动它们对应的DOM,，不需要再花心思查找直接移动DOM就好)

·原地复用是指Vue会尽可能复用DOM，尽可能不发生DOM的移动。

 

一些不需要做移动的DOM得到快速处理，另一方面待处理节点变少，缩小了后续操作的处理范围，性能也得到提升

 

2.双向数据绑定（劫持数据）

1）目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件

 

2）数据双向绑定的方式

发布者-订阅者模式（backbone.js）(所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化，我们将代理事件到发布者-订阅者模式，这会反过来将变化广播并传播到所有绑定的对象和元素。)

 

脏值检查（angular.js）: angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，angular只有在指定的事件触发时进入脏值检测

 

数据劫持（vue.js）:结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

 

3）数据双向绑定实现原理的要求

1. 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2. 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3. 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4. mvvm入口函数，整合以上三者

 

 

三、vue.js的核心功能

计算属性、模板语法、组件化、过渡效果

 

1、计算属性

计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值.

 

<p>{{total}}</p>

 

 

2.模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

1）{{value}}

使用v-html插入纯HTML

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

2）v-bind(:)

3）条件渲染：v-if

4）用于是否展示元素：v-show

5）列表渲染：v-for

3.组件化

编写组件

 

使用（在另外一个页面及vue中使用）

1.导入

2.注册

3.使用

 

4、过渡效果

vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，可以用简单的几行代码实现酷炫的过渡效果。Vue 提供了 transition 的封装组件，在使用v-if、v-show等方法使得transition内部dom元素发生变化时，可以给任何元素和组件添加 entering/leaving 过渡。

 

https://cn.vuejs.org/v2/guide/transitions.html

 

 

单页面应用程序时往往是需要路由，这时候需要把vue的插件（vue-router）拉进来做路由，如果我们的项目足够复杂，大量的使用组件而且难以去管理组件的状态，这个时候我们使用vue-resource,vue-resource是集中来管理我们的状态的。项目完成后需要构建工具来build我们的系统，来提高我们的效果，最后形成完成的项目。