前端小白带大家一起学习Vue~

@首先让我们一起先来了解一下Vue

Vue简介：

1. vue.js是目前最火的一个前端框架，是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架。
2. Vue.js 是一套构建用户界面的渐进式框架，其优点是简单小巧、渐进式技术栈、足以应付任何规模的应用、更轻量，单页面，简单易学，缺点是不支持IE8。
3. 通俗的说，抛开官方说法，简单来说，在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或js来添加各种特效功能，需要选中每一个元素进行操作，这些内容在简单项目中或者不变的项目还能应付得来。一旦项目改动或者项目工程较大，代码的修改将是复杂繁琐的，而这时候用了vue，这些问题都不复存在，应用了vue之后将大大缩减工作量。
4. 使用Vue可以让web开发变得更加简单，同时颠覆了传统前端开发模式，提供了现代web开发里常见的高级功能。
   例：
   ①解耦视图与数据view&&data
   ②可复用的组件Components
   ③前端路由router
   ④状态管理Vuex
   ⑤虚拟DOM（virtual DOM）等等

vue的使用安装

Vue.js是一个渐进式的js框架，前期的基础学习阶段，引入vue先用最简单的方式—通过script加载CDN文件，或者下载后通过script标签引入。

在浏览器中输入jquery CDN进行搜索（如下图）：

打开以后我们可以看到里面包含了很多版本的CDN文件（如下图）：

接下来就是在我们的代码中引入我们的源文件：

注意：这里要强调一下，CDN有两个版本，开发环境版本和生产环境版本，这里我们可就要重点关注一下了：开发环境版本，包含了完整的警告和调试模式，使用者有任何问题都可以在控制台进行查看，方便及时查找并修改错误**；**生产环境版本，删除了警告，优化了尺寸和速度。
注意：在开发环境下不要使用压缩版本，不然就失去了所有常见错误相关的警告!

第二种方法就是NPM：

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack模块打包器配合使用。同时也提供配套工具来开发单文件组件。（通常配合脚手架进行开发）

vue的三种架构模式/开发模式MVVM、MVC、MVP

1. MVC —全名：Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写。
本质：是一种软件设计典范。M是指业务模型，V是指用户界面，C则是控制器。
①视图是用户看到并与之交互的界面；
②模型表示企业数据和业务规则（可以说就是后端接口，用于业务处理）；
③控制器接受用户的输入并调用模型和视图去完成用户的需求。

（1）用户首先在界面中进行人机交互，然后请求发送到控制器
（2）控制器根据请求类型和请求的指令发送到相应的模型
（3）模型可以与数据库进行交互，进行增删改查操作
（4）操作完成之后，在相应的视图进行显示，此时用户获得此次交互的反馈信息，用户可以进行下一步交互，如此循环。

2. MVP 全称：Model-View-Presenter 由来：MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑处理，Model提供数据，View负责显示。
①Presenter：作为model和view的中间人，从model层获取数据之后传给view，使得View和model没有耦合；②总得来说MVP的好处就是解除view与model的耦合，使得view或model有更强的复用性。

从MVC模式演变而来的，把MVC中的Controller换成了Presenter（呈现），目的就是为了完全切断View跟Model之间的联系，由Presenter充当桥梁，做到View-Model之间通信的完全隔离。

3. MVVM 名称：mvvm即Model-View-ViewModel 原理：mvvm的设计原理是基于mvc的，所以说mvvm不算是一种创新，充其量是一种改造，这其中的ViewModel便是一个小小的创新。

以上图中可看出三者之间的关系；可以将ViewMode看作是Model和View的连接桥，View可以通过事件绑定Model，Model可以通过数据绑定View，通过ViewMode可以实现数据和视图的完全分离。
如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。
它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。

架构对比分析：

1. MVC即model，view，control，jQuery就是采用的这种设计模式，熟悉jQuery的应该清楚

2. MVVM即model，view，viewmodel，它是数据驱动模式，即所有的一切通过操作数据来进行，而尽量避免操作dom树

MVVM总结：换句话说，我们不关注dom的结构，而是考虑数据该如何储存，用户的操作在view通过viewmodel进行数据处理，分情况是否通过ajax与model层进行交互，再返回到view层，在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对dom的繁琐操作，而是专心于对用户的操作进行处理，避免了MVC中control层过厚的问题。

那么问题来了，看到这就有问题了，那我们之前学的js、jq这些跟vue比起来哪个更好用一些呢？

首先，我们来看一下jquery和vue对比来说有什么不同：
我们用jQuery来操作DOM，点击按钮实现隐藏块区域实现代码很简单

但是这样会使视图代码和业务逻辑耦合在一起，随着功能增加，直接操作DOM也会使得代码越来越难以维护。

Vue.js通过vue的MVVM模式，可以将其拆分为视图和数据两部分，并且将其分离。

此时只需要关注数据即可，DOM的相关操作Vue会搞定。

所以，看到这里大家对vue应该也有一定的了解了叭~

最后，在这里普及一下框架和库的区别：
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。例如：node 的 express框架。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求，例如：jQuery、 Zepot等。

今天的分享就到这里了叭~！
古~ 德 ~ 儿 ~ 拜~