vue2学习笔记7 - Vue中的MVVM模型

MVVM

Model-View-viewModel是一种软件架构模式,用于将用户界面(View)与业务逻辑(Model)分离,并通过ViewModel进行连接和协调。MVVM模式的目标是实现视图与模型的解耦,提高代码的可读性、可维护性和可测试性。

在MVVM模式中,View是用户界面的呈现层,负责展示数据和接收用户的输入。ViewModel是视图模型,负责处理View的状态、行为和交互逻辑。ViewModel通过数据绑定机制将数据从Model传递给View,并将用户的输入传递给Model进行处理。Model是应用程序的业务逻辑和数据模型,可以是数据库、API接口或其他数据源。

MVVM模式的核心思想是数据绑定,通过观察数据的变化,自动更新视图的内容,从而实现界面的更新和交互。这样可以减少手动操作视图的代码量,提高代码的复用性和可维护性。

Vue中的MVVM

Model: JS 一般对象,指的就是我们前面反复提起的Vue实例中的data中的数据

View:视图,代码中的模板。DOM,经过解析生成的页面DOM对象。

VM:视图模型(viewModel),Vue实例对象。通过DOM监听器,和前面提到的双向绑定特性,实现View和Model之间的数据传递。

以下图为例,Vue实例作为View和Model中的桥梁,通过一个框架,提供各种指令、API,实现了二者之间的关联。因此,经常看到用变量vm来代表所创建的Vue实例

 所以:

  • data中的所有属性(用户自定义),都出现在vm中(可以用console.log(vm)将vm打印出来观察);
  • vm中所有的属性和方法,不论私有还是暴露出来的,都可以在Vue模板中直接使用。(只是私有属性和方法使用时会有响应和更新的问题吧)

相关推荐

  1. VueMVVM

    2024-07-17 07:56:03       35 阅读
  2. WPF学习(7) --MVVM模式

    2024-07-17 07:56:03       27 阅读
  3. Vue学习笔记-Vue3shallowReactive和shallowRef

    2024-07-17 07:56:03       60 阅读
  4. Vue学习笔记-Vue3toRaw和markRaw

    2024-07-17 07:56:03       54 阅读
  5. Vue学习笔记-Vue3provide与inject

    2024-07-17 07:56:03       59 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-17 07:56:03       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-17 07:56:03       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-17 07:56:03       58 阅读
  4. Python语言-面向对象

    2024-07-17 07:56:03       69 阅读

热门阅读

  1. React基础学习-Day06

    2024-07-17 07:56:03       22 阅读
  2. Oracle(6)什么是重做日志文件(Redo Log File)?

    2024-07-17 07:56:03       18 阅读
  3. el-table template slot-scope=“scope“ 不显示内容

    2024-07-17 07:56:03       25 阅读
  4. PICO,迷途VR?

    2024-07-17 07:56:03       24 阅读
  5. ubuntu 18 cuda 11.8 安装 vllm

    2024-07-17 07:56:03       24 阅读
  6. LLM大语言模型研究方向总结剖析

    2024-07-17 07:56:03       21 阅读
  7. 如何在SpringCloud中优雅实现服务注册与发现

    2024-07-17 07:56:03       22 阅读