AI辅助学习：给一个 mvvm 模式使用的小例子

MVVM在面试时问得很多，下面让Ai教我们怎么用这个模式：

以下是一个简单的 MVVM（Model-View-ViewModel）模式在 JavaScript（使用 Vue.js 框架来实现）中的小例子，展示了如何实现数据绑定和交互逻辑的分离。

1. 项目搭建

首先，确保你已经安装了 Vue.js。如果没有，可以通过以下方式在项目中引入：
在 HTML 文件的头部添加如下 CDN 链接：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

2. 创建 Model

Model 代表应用程序的数据模型，它通常包含数据的结构和获取数据的方法（在这个简单例子中，我们先简单定义一些数据）。

// Model.js
const model = {
    data: {
        message: 'Hello, MVVM World!',
        count: 0
    }
};

export default model;

这里定义了一个简单的对象 model，其中包含了 message 和 count 两个数据属性。

3. 创建 ViewModel

ViewModel 是连接 Model 和 View 的桥梁，它负责从 Model 获取数据并将其提供给 View 进行展示，同时也处理来自 View 的用户交互事件并更新 Model 中的数据。

// ViewModel.js
import model from './Model.js';

const viewModel = {
    data: Vue.util.extend({}, model.data),
    incrementCount() {
        this.data.count++;
    }
};

export default viewModel;

在 ViewModel.js 中，首先引入了 Model，然后通过 Vue.util.extend 方法创建了一个新的对象，其数据来源于 Model 的数据，这样可以保证数据的独立性，避免直接修改 Model 的数据。同时定义了一个方法 incrementCount，用于增加 count 的值。

4. 创建 View

View 负责展示数据和接收用户的交互操作，它通过数据绑定与 ViewModel 进行交互。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>MVVM Example</title>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
        <p>Count: {{ count }}</p>
        <button v-on:click="incrementCount">Increment Count</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="ViewModel.js"></script>
    <script>
        const app = new Vue({
            el: 'app',
            data: viewModel.data,
            methods: {
                incrementCount: viewModel.incrementCount
            }
        });
    </script>
</body>

</html>

在这个 HTML 文件中：

通过双大括号 {{ }} 语法实现了数据绑定，将 ViewModel 中的 message 和 count 数据展示在页面上。

使用 v-on:click 指令绑定了按钮的点击事件，当用户点击按钮时，会调用 ViewModel 中的 incrementCount 方法，从而实现对 count 数据的更新。

在整个例子中：

Model 负责提供数据的基础结构和初始值。
ViewModel 在 Model 和 View 之间起到了承上启下的作用，它获取并处理 Model 的数据，同时响应 View 的交互请求并更新 Model 的数据。
View 则专注于数据的展示和用户交互操作的接收，通过数据绑定和指令与 ViewModel 紧密配合，实现了数据展示和交互逻辑的分离，符合 MVVM 模式的特点。

请注意，这个例子只是一个非常简单的演示，在实际应用中，Model 可能会涉及到更复杂的数据获取和处理，比如从 API 获取数据等，ViewModel 也会有更复杂的逻辑来处理数据转换和事件响应，View 可能会有更多的页面元素和交互设计。

总结一下

View + ViewModel 是纯js 代码，减少了View里的代码量，纯代码便于测试与重用。

AI辅助学习：给一个 mvvm 模式使用的小例子

1. 项目搭建

2. 创建 Model

3. 创建 ViewModel

4. 创建 View

总结一下

Yujiaao

引用和评论

前端开发工具

开发插件集合

Vue.js-方法与事件

Vue 项目推荐使用这个图标库 vue-icons-plus

Vue使用mixins

这个前端神器，竟让滴滴、美团都爱不释手？！

web每日一题（不断更新中）