Vue.js学习心得

一、什么是Vue.js？

 Vue.js 是一套用于构建用户界面的渐进式 JavaScript 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js的优点：

1、体积小；

2、更高的运行效率；

3、双向数据绑定：让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上；

4、生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架、常用组件！拿来即用实现快速开发！

如何安装vue？

1. 直接用script标签引入

a.点击起步

 b.点击安装

c. 选择版本

d.使用时使用script标签导入即可 :

<script src="vue.js"></script>

2. NPM方法

 在用Vue.js构建大型应用的时候推荐使用NPM安装方法，NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

（1）安装node.js

从node.js官网下载并安装node，我们通过打开命令行工具（win+R）,输入 node -v 命令，查看node的版本，若出现相应的版本号，则说明安装成功。如下图：

安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息：

到目前为止，node的环境已经安装完成，npm 包管理器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像。

（2） 安装镜像

在命令行中输入  npm install -g cnpm --registry=https://registry.npm.taobao.org  ，然后等待，没报错表示安装成功。如下图：

 （3） 安装vue-cli 脚手架构建工具

在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。安装完成之后然后创建文件等。

---

 二、第二个要讲的是MVC、MVP、MVVM的异同。

1.MVC

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

方式：所有方式都是单向通信

数据关系：

1）view接受用户交互请求

2）view将请求转交给Controller

3）Controller操作model进行数据更新

4）数据更行之后，model通知view更行数据变化

使用：MVC中的View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。在MVC模型里，更关注的Model的不变，而同时有多个对Model的不同显示，及View。所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。

---

2. MVP

mvp的全称为Model-View-Presenter，Model提供数据，View负责显示，Controller/Presenter负责逻辑的处理。MVP与MVC有着一个重大区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是通过 Controller。

方式：部分之间都是双向通信

MVC与MVP的区别：Model与View层之间倒底该不该通信（甚至双向通信）

数据关系：

1）view接受用户交互请求

2）view将请求转交给presenter

3）presenter操作model进行数据更新

4）数据更行之后，model通知presenter更行数据变化

使用：MVP的实现会根据View的实现而有一些不同，一部分倾向于在View中放置简单的逻辑，在Presenter放置复杂的逻辑；另一部分倾向于在presenter中放置全部的逻辑。这两种分别被称为：Passive View和Superivising Controller。

---

3. MVVM

MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面 (UI) 清晰分离。 保持应用程序逻辑和UI之间的清晰分离有助于解决许多开发问题，并使应用程序更易于测试、维护和演变。 它还可以显著提高代码重用机会，并允许开发人员和UI设计人员在开发应用各自的部分时更轻松地进行协作。

方式： 双向绑定，View/Model的变动，自动反映在 ViewModel，反之亦然。

数据关系：

1）view接受用户交互请求

2）view将请求转交给viewmodel

3）viewmodel操作model数据更新

4）model更新数据完毕，通知viewmodel数据更新

5）viewmodel更新view数据

 使用：（1）可以兼容你当下使用的MVC/MVP框架。（2）增加你的应用的可测试性。（3）配合一个绑定机制效果最好。（4）典型的应用有：NET的WPF，js框架Knockout、AngularJS，vuejs等。

优点：

1.  低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 
2.  可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。 
3.  独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，生成xml代码。 
4.  可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。