MVVM简单实战案例：打造动态前端

2024-01-26 19:12:57

MVVM 简介

MVVM（Model-View-ViewModel）是一种软件架构模式，它将应用程序的业务逻辑（Model）、用户界面（View）和连接这两者的中间层（ViewModel）清晰地分离开来。这种设计模式使代码更易于维护和测试，并提高了应用程序的可扩展性和灵活性。

2. 简单实战案例

接下来，我们通过一个简单的MVVM示例，逐步剖析MVVM的原理和应用。

2.1 模型（Model）

模型（Model）是应用程序的核心，负责管理应用程序的数据和业务逻辑。在我们的示例中，我们将使用一个简单的 Todo 模型来演示如何使用 MVVM。

type Todo struct {
	ID          int
	Title       string
	Description string
	Completed   bool
}

2.2 视图（View）

视图（View）是应用程序的用户界面，负责将数据显示给用户并允许用户与应用程序交互。在我们的示例中，我们将使用一个简单的 HTML 页面作为视图。

<div id="app">
  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" v-model="todo.completed">
      <span>{{ todo.title }}</span>
      <span>{{ todo.description }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <input type="text" v-model="newTodoTitle">
  <button @click="addTodo">Add Todo</button>
</div>

2.3 视图模型（ViewModel）

视图模型（ViewModel）是 MVVM 模式的核心组件，它负责将模型中的数据转换为适合视图显示的格式，并处理来自视图的交互。在我们的示例中，我们将使用一个简单的 Vue.js 视图模型。

const app = new Vue({
  el: '#app',
  data: {
    todos: [],
    newTodoTitle: ''
  },
  methods: {
    addTodo() {
      this.todos.push({
        ID: this.todos.length + 1,
        Title: this.newTodoTitle,
        Description: '',
        Completed: false
      });
      this.newTodoTitle = '';
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(t => t !== todo);
    }
  }
});