MVVM模式

最新推荐文章于 2022-07-16 18:02:35 发布

独行老僧

最新推荐文章于 2022-07-16 18:02:35 发布

阅读量246

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/weixin_43833094/article/details/100829814

版权

这篇博客介绍了MVVM模式，重点讲解了在vue.js框架中的应用。内容包括MVVM的组成部分——Model、View和ViewModel的职责，以及MVVM如何解决业务逻辑与视图代码分离的问题。此外，还通过一个简单的入门程序展示了在html页面中使用vue.js实现MVVM的步骤。

摘要由CSDN通过智能技术生成

vue.js是一个MVVM的框架，理解MVVM有利于学习vue.js。
1. MVVM拆分解释为:
Model:负责数据存储
View:负责页面展示
View Model:负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示
MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离,使各自的职责更加清晰,后期代码维护更加简单
用图解的形式分析Ajax请求回来数据后直接操作Dom来达到视图的更新的缺点,以及使用MVVM模式是如何来解决这个缺点的Vue中的 MVVM
在这里插入图片描述
从上图看出，VM(ViewModel)可以把view视图和Model模型解耦合，VM的要做的工作就是vue.js所承担的。
2.入门程序:
本次测试我们在门户目录中创建一个html页面进行测试，正式的页面管理前端程序会单独创建工程。在门户目录中创建vuetest目录，并且在目录下创建vue_01.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的测试程序</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <!‐‐ 在Vue接管区域中使用Vue的系统指