浅谈Vue入门

（一）. 认识Vue.js

• Vue是一个渐进式的javascript框架

  • 渐进式 【 越学越难 】

  • Vue的作者是 尤雨溪

  • Vue是一个个人项目 【 React是facebook的团队项目 】

  • Vue是一个MVVM框架 【 MVVM是MVC的衍生架构 】

  • Vue是一个单项数据流的框架

• Vue版本发布的时间
  • Vue 1.x 2014
  • Vue 2.x 2016 【 es6 vue 微信小程序 angular2.0 等开始火起来了 】

2. MVC
   - MVC是一个软件架构思维，它将一个软件分为三个部分
     - M   Model      数据
     - V   View       视图
     - C   Controller 控制器
     - 
   - MVC衍生
     - mvc           backbone 【 前端框架 】
     - mvp           
     - mvvm          Vue   Angular.ts 【 Angular2.0】
     -               		ember

3. MVVM
   -  M         Model     数据
   -  V          View      视图
   -  VM       ViewModel 视图模型

V的变化会反应到VM上，反之同理，也就是vm的改变也会影响V 

4 Vue学习思路

• Vue有指令和组件系统两个大功能
• 通过js想操作DOM - > Vue也想操作DOM
  • 问题： Vue中不建议像二阶段一样直接去操作DOM
  • 解决： 方案： 指令

- 使用形式： 
     - 绑定在dom的属性身上
     - 为了区别自定义属性，vue提供的指令都携带  v-
     
   - 数据展示
     - v-html  非转义输出 ， 可以解析 xml类型数据 
     - v-text
     
   - 条件渲染
     - v-if 
     - v-else-if 
     - v-else
     
   - 条件展示
     - v-show  
     - v-if  vs v-show 
       - v-if是真正的控制dom的存在与否，v-show 是控制dom的display:none属性
       - 如果初始条件都为false,v-if会惰性渲染【 不渲染 】，但是v-show不管条件是什么都会渲染，所以v-show的初始渲染开销较高
       - 如果我们要频繁的切换flag,那么我们使用谁? 我们使用 v-show ， 反之，使用v-if
       

（二）MVC，MVP，MVVM

MVC是最经典的开发模式之一，最早是后台那边来的，后台前端的复杂度也上来了，MVC的开发模式也带进前端了。
MVC有两个很明显的问题：
1.m层和v层直接打交道，导致这两层耦合度高(是一种软件度量，是指一程序中，模块及模块之间信息或参数依赖的程度。)
2.因为所有逻辑都写在c层，导致c层特别臃肿
为了解决这两个问题，MVC的变种模式出现了MVP和MVVM.

mvp
p层代替了c层，v层和m层的交互被p层隔断，从理论上去除了v和m层的耦合
但是造成p层比原来的c层更加臃肿，为了缓解这种臃肿，MVVM出现了

mvvm
简单的来说MVVM其实就是MVP中把P层削弱为VM层，部分简单的逻辑职责分给了View层。
例如ng中的ng-if,ng-for…其实就是V层上的简单逻辑，这样做使得VM层相比起P层就没有这么臃肿了
MVVM中View Model和Model是相互的，一方改动，另一方也会随之变化，Vue的无刷新更新页面就是源于此