Vue

初识Vue

Vue介绍

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

• 作者：尤雨溪

• 是一个个人项目 （React 是Facebook的团队项目）

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

  • 扩展：司徒正美 avonlon.js也是MVVM框架 ，也是个人项目

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

• Vue版本发布的时间

  • Vue 1.x 2014
  • Vue 2.x 2016

  MVC

  • MVC的意思是，软件可以分为三个部分
    • View 视图：用户界面
    • Controller 控制器：业务逻辑
    • Model 模型 ：数据保存
  • 各部分的通信方式：
    1. View传送指令到Controller
    2. Controller 完成业务逻辑后，要求Model改变状态
    3. Model将新的数据发送到View,用户得到反馈
  • 接收用户指令时，MVC可以分为两种方式
    • 通过View接受指令，传递给Controller
    • 也可直接通过Controller接受指令
  • 总结：
    • 所有的通信都是单向的
    • 单向数据流
  • 实例：backbone 前端框架

  MVP

  • MVP模式将Controller 改名为Presenter,同时改变了通信方向
  • View和Presenter Model和Presenter 通信是双向的
  • View和Model之间不发生联系，都通过Presenter 传递
  • View不部署任何业务逻辑，被称为“被动视图”，所有的逻辑都部署在Presenter

  MVVM

  • MVVM将Presenter改名为ViewModel,与MVP基本一致
  • 区别：采用双向绑定，View的变动，自动反映在ViewModel,反之亦然。（一根线两个箭头）
  • Angular Ember 都采用这种模式
    • Angular.ts【Angular 2.0】

  Vue

  • Vue有指令和组件系统两大功能

  • Vue操作DOM 通过指令

  • 指令： 绑定在DOM的属性身上 为了区别自定义属性 Vue提供的指令都携带 v-

  • 数据展示

    • v-html 非转义输出 可以解析标签
    • v-text

  • 条件渲染

    • v-if
    • v-if-else
    • 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

  • 列表渲染

    • v-for（数组 对象 json 数据嵌套）

​

​