VUE（一、VUE简介、快速入门

一、VUE介绍

学习前还是抛出俺们老三样：

• 什么VUE？
• 为什么要学习VUE？
• MVVM和MVC有什么区别？

1.1、什么是VUE 

1. VUE是一套前端框架，免除了原生JavaScript中的DOM操作，简化书写 
2. VUE基于MVVM（Model-View_ViewModel）思想，实现数据双向绑定

1.2、为什么要学习VUE 

要清楚我们现在为什么要去学习VUE，我们就要先理解一下编程行业的发展 

00版本：html+js+css 
这些程序员每一个div，每一句js，甚至每一个颜色码，都是手写出来的。就像是一台纯手工打造的法拉利，工程师们对这台车的细节都无比熟悉，甚至这台车里面哪片钢板上有一个小划痕他们都知道。（当然，纯手工打造也有连质检都过不了的，不是每个纯手工打造都叫法拉利，也就是说不是手写的代码就牛逼）

01版本:EasyUI+JQuery
纯手工打造费时费力，一些工程师们看到了商机，他们不做车了，他们转行去做了总成件供应商。这些供应商们把一些零件封装成了总成件，然后提供给汽车制造商，并且承诺总成件的质量比你原来自己做的质量好的多。换我，我也得用总成件啊是不是···

02版本：node.js + vue（React，Angular）+ElementUI（iview，antDesign）
node.js 横空出世，将前端平台化。以前的车（前端代码）只能在路上运行（浏览器），现在在你的实验室里车也能跑起来了（服务端）。（至于能不能用node.js去开发后端，我还没有试过，我就先不瞎XX了。）发展到这个阶段，开发模式就相当于由原来的作坊式生产变成了企业流水线。node.js的npm就是你的采购部门，npm ：你就说你要install啥。vue就是流水线,并且是双向绑定流水线。那ElementUI就是你的总成件仓库。工人要做的，就是把总成件放在车上。这对企业来说，生产力提高这么多，工具还全都是免费的，那收益不得蹭蹭上，于是大家都乐开了花

所以：懒惰是第一生产力，一切框架的诞生都是因为懒~ 

1.3、MVVM和MVC有什么区别？

MVC：

• MVC是一种设计模式：
• M（Model）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据；
• V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的；
• C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。

 

 MVVM：

• vue框架中MVVM的M就是后端的数据，V就是节点树，VM就是new出来的那个Vue({})对象
• M（Model）：模型层。就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model。
• V（View）：视图层。就是展现出来的用户界面。
• VM（ViewModel）：视图模型层。连接view和model的桥梁。因为，Model层中的数据往往是不能直接跟View中的控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。
   

 

MVVM与MVC的最大区别就是：它实现了View和Model的自动同步，也就是当Model的数据改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变数据后该数据对应View层显示会自动改变。

 

 

二、VUE快速入门 

 1、新建HTML页面，引入Vue.js文件（自己去官网下载噢~）

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

2、在JS代码区域，创建VUE核心对象，进行数据绑定

new Vue({
  el:"#app",
  data(){
    return{
      username:""
    }
  }
});

3、编写视图

<div id = "app">
  <input type="text" name="username" v-model="username">
  {{username}}
</div>

 

打开网页我们更改输入框的内容，发现数据也会跟着输入框变动而变动啦，这就完成了一个最简单的双向绑定