2、MVVM

Bertha 。 2021-09-24 19:38 323阅读 0赞

### Vue中的MVVM ###

*  一、Vue 的 MVVM
 *   *  1.1、View 层
     *  1.2、Model 层
     *  1.3、VueModel 层
 *  二、options
 *   *  2.1、el
     *  2.2、data
     *  2.3、methods

# 一、Vue 的 MVVM #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70_pic_center]

## 1.1、View 层 ##

*  视图层
 *  在前端开发中，通常就是 DOM 层
 *  主要的作用是给用户展示各种信息

## 1.2、Model 层 ##

*  数据层
 *  数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据

## 1.3、VueModel 层 ##

*  视图模型层
 *  视图模型是 `View` 和 `Model` 沟通的桥梁
 *  一方面它实现了数据绑定，将 `Model`的改变实时的反应到 `View` 中
 *  另一方面它实现了 `DOM` 监听，当 `DOM` 发生一些事件时（点击、滚动等），可以监听到，并在需要的情况下改变对应的 `Data`

工作原理：

*  `View` 依然是我们的 `DOM`，`Model` 就是我们抽离出来的 `obj`，`ViewModel` 是我们创建的 `Vue` 实例
 *  `ViewModel` 通过 `Data Binding` 让 `obj` 中的数据实时的在 `DOM` 中显示
 *  `ViewModel` 通过 `DOM Listener` 来监听 `DOM` 事件，并且通过 `methods` 中的操作，来改变 `obj` 中的数据

# 二、options #

创建 Vue 实例传入的 options：

## 2.1、el ##

类型：String | HTMLElement  
作用：决定 Vue 实例会管理哪一个 DOM

## 2.2、data ##

类型：Object | Function  
作用：Vue 实例对应的数据对象

## 2.3、methods ##

类型：`{[key,value]: Function}`  
作用：定义属于 Vue 的一些方法

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

**博主的所有博客目录如下：[博客文章目录汇总][Link 1]  
Java面试部分的博客目录如下：[Java笔试面试目录][Java]**

> **转载请标明出处，原文地址：https://blog.csdn.net/weixin\_41835916 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。  
> ![这里写图片描述][70]**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/5b0a4c944ca64b4d811af8c4ba31276b.png
[Link 1]: https://blog.csdn.net/weixin_41835916/article/details/81879208
[Java]: https://blog.csdn.net/weixin_41835916/article/details/81413498
[70]: /images/20210923/f0ffadaecba54d3f935cec1aa29450d4.png