VUE-01-介绍

VUE简介

1.什么是vue

1.1. 构建用户界面

  官方给出的概念：Vue（读音/vju：/，类似于view)是一套用于构建用户界面的前端框架。

• 用 vue 往html页面中填充数据，非常方便

1.2. 框架

• 框架是一套线程的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能
• 要学习vue，就是在学习Vue框架中规定的用法
• vue的指令、组件（是对UI结构的复用）、路由、Vuex、vue组件库

2. vue的两个特性

  vue框架的特性，主要体现在如下两方面：

1. 数据驱动视图
2. 双向数据绑定

2.1 数据驱动视图

• 数据的变化会驱动视图自动更新
• 好处：程序员只管把数据维护好，那么页面结构会被vue自动渲染出来
• 在使用了vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：

  好处：当页面数据发生变化时，页面会自动重新渲染
  注意：数据驱动视图是单向的数据绑定

2.2 双向数据绑定

在网页中，form表单负责采集数据，Ajax负责提交数据

• js数据的变化，会被自动渲染到页面上
• 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中

  在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源
中。示意图如下：

  好处：开发者不再需要手动操作DOM元素，来获取表单元素最新的值

注意：数据驱动视图和双线数据绑定的底层原理是 MVVM(Mode 数据源、View视图、ViewModel 就是vue的实例)

2.3 MVVM

  MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model、View和ViewModel,它把每个HTML页面都拆分成了这三个部分，如图所示:

2.4 MVVM的工作原理

  ViewModel作为MVVM的核心，是它把当前页面的数据源（Model)和页面的结构（View）连接在了一起。

  当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构
  当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model数据源中