6、vue

1.理解MVVM思想

  • 什么是MVVM？
    • MVVM是Model-View-ViewModel的缩写。
  • MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想。
    • 在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。
  • 把Model和View关联起来的就是ViewModel。
    • ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

2.vue.js介绍

  • Vue是一套用于构建用户界面的渐进式的轻量级框架

  • Vue是MVVM设计模式的具体实现方案

  • Vue只关注视图层，便于与第三方库或既有项目整合

  • Vue可以与现代化的工具链和各种类库结合使用，为复杂的SPA提供驱动

3.vue起步

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

数据和 DOM 已经被建立了关联，所有东西都是响应式的。

  • el
    • 类型：string | Element
    • 限制：只在用 new 创建实例时生效。
    • 详细：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
      • 可以是 CSS 选择器
      • 也可以是一个 HTMLElement 实例。
    • 在实例挂载之后，元素可以用 vm.$el 访问。
    • 如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。
  • data
    • 类型：Object | Function
    • 限制：组件的定义只接受 function。
    • 详细：Vue 实例的数据对象
      • Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。
      • 对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的 property 会被忽略。
      • 大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。


    
        
        Title
        
        
    
    
        
        

            
            {{message}}

4.模板语法

  • Vue.js中使用的是基于html的模版语法，可以将Dom元素绑定至Vue实例中的数据。

  • 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

    Message: {{ msg }}
  • 页面中模版即就是通过{{}}方式来实现模版数据绑定。

4.1 数据绑定的方式

  • 单向绑定

    • 方式1：使用两对大括号{{}}

    • 方式2：使用v-text、v-html

  • 双向绑定

    • v-model指令实现

5.指令

5.1. 指令（绑定）

  • v-text

    • 预期：string   用法：数据绑定
    • 更新元素的 textContent
    • 如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值 
       
 
{{msg}}

  • v-html

    • 预期：string   用法：数据绑定
    • 更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译
    • 如果试图使用 v-html组合模板，可以重新考虑是否通过使用组件来替代

  • v-model

    • 预期：随表单控件类型不同而不同。
    • 限制：
      • 、