1.Vue简介--MVVM模型

约定不等于承诺〃 2024-04-08 12:16 180阅读 0赞

**目录**

1.什么是vue

2.Vue的特性

数据驱动视图

双向数据绑定

3.MVVM

MVVM工作原理

4.Vue的特点

--------------------

##  ##

## 1.什么是vue ##

**用于构建用户界面的前端框架**

![74e40d20d5734e4f867c9a848a79607f.png][]

![7c491fc464a44cfdaab62e4eada5c73a.png][]

![3aef641132a24fa2ab73f5aa18b8ae1c.png][]

## 2.Vue的特性 ##

### 数据驱动视图 ###

在使用Vue页面中，Vue会监听数据的变化，从而自动重新渲染页面的结构

![a68ef03a98c64832a34958d47ab0b5fc.png][]

数据的改变导致了页面结构的改变

**好处：**当页面数据发生变化时，页面会自动重新渲染

**注意：**数据驱动视图是单向的数据绑定（上图中总是从右到左）

### 双向数据绑定 ###

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

![4956d2b96e304b7284d5fb30d60a5931.png][]

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

## 3.MVVM ##

M：模型model，对应data里面的数据

V：视图View，模板

VM：视图模型ViewModel，Vue实例对象

![7df654956ff84c9d8696027e6e84acb9.png][]

观察发现：

data中所有的属性最后都出现在VM身上

VM身上所有的属性及Vue原型上所有的属性，在Vue模板中都可以直接使用

MVVM是Vue实现数据驱动视图和双向数据绑定的核心原理，把每个HTML页面都拆分成了如下三个部分：

![88b66b165d1145338db088a9dda6514c.png][]

### MVVM工作原理 ###

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

![df8b6348b8594aafae86857d63c2af23.png][]

## 4.Vue的特点 ##

![d4758047512a4fe69d3f7b86c538a9e6.png][]

![56ca5bce11454b119ce005fe06f323dc.png][]

![ff4f7829acb14e9b924cb145cd9ddddd.png][]

![a6f38111ccc54a24bc31f4911832bc48.png][]

[74e40d20d5734e4f867c9a848a79607f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/5a90eb91aad9414282f873da5a0c61f8.png
[7c491fc464a44cfdaab62e4eada5c73a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/df8328eff77d427789e6ba92b6782ff2.png
[3aef641132a24fa2ab73f5aa18b8ae1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3b818efcc2b24368aad87da14f0d8e6b.png
[a68ef03a98c64832a34958d47ab0b5fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/379127851f654936a5489bd76d0202de.png
[4956d2b96e304b7284d5fb30d60a5931.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/e1dab8d9ebb14cfc8aca7e8c7135f129.png
[7df654956ff84c9d8696027e6e84acb9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/73ffea117a704032ad6a2b8419fef5be.png
[88b66b165d1145338db088a9dda6514c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/9e148d00f88a40c8bed1e197f53579f9.png
[df8b6348b8594aafae86857d63c2af23.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/b778b0abd3c14d21b9ae589e1c901338.png
[d4758047512a4fe69d3f7b86c538a9e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ab03784bbee4418f99fe71225f721b3b.png
[56ca5bce11454b119ce005fe06f323dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/108ab8939d0d42ffb7df0eb48349b8b1.png
[ff4f7829acb14e9b924cb145cd9ddddd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/02d0c1f5621744a28f872efdb1044714.png
[a6f38111ccc54a24bc31f4911832bc48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ff75dc7858e64cd39be9aa9dce2dc630.png