MVVM模式

MVVM拆分解释为：

  • Model：负责数据存储；
  • View：负责页面展示；
  • View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

 

MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更加简单。以下用图解的形式分析Ajax请求回来数据后直接操作DOM来达到视图的更新的缺点，以及使用MVVM模式是如何来解决这个缺点的

 

解决的问题

 

以下是代码表示

复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
        <!--View-->
      {{message}}
    </div>

    <script>
        //View Model
      new Vue({
        el: '#app',
        data:{
          message:"hello" //Model
        }
      })
    </script>
  </body>
</html>
复制代码

 

posted @   Z皓  阅读(203)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手