2、MVVM

Bertha 。 2021-09-24 19:38 403阅读 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

在这里插入图片描述

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 的一些方法

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

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

发表评论

表情：
评论列表 （有 0 条评论，403人围观）

还没有评论，来说两句吧...

相关阅读

    相关 MVVM

    [原文链接][Link 1] > 目前客户端最流行的架构应该就是MVVM，然而在看了一些文章之后发现大部分是理论而并没有仔细讲解具体的架构方法和实践，这篇博客说说我在实际工作

    悠悠悠悠/ 0 赞/ 248 阅读

    相关 MVVM学习

    优势 MVVM的目标和思想MVP类似，利用数据绑定(Data Binding)、依赖属性(Dependency Property)、命令(Command)、路由事件(Ro

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 338 阅读

    相关 mvvm架构

    一、后端中的 MVC 与 前端中的 MVVM 之间的区别   MVC 是后端的分层开发概念；   MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：M

    阳光穿透心脏的1/2处阳光穿透心脏的1/2处/ 0 赞/ 393 阅读

    相关 MVVM模型

    view-页面HTML viewModel-核心调度者协调器/双向数据绑定 model-数据模型 一种前端的开发模型，，MVVM针对前端的一种前端的框架，用来简化前端的开

    本是古典 何须时尚本是古典 何须时尚/ 0 赞/ 366 阅读