用自定义指令实现 Vue.js 中的 TodoMVC 示例

2024-02-16 06:06:38

前言

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。它提供了一个响应式和组件化的系统，使开发人员能够轻松创建动态和交互式的网络应用程序。TodoMVC 示例是一个流行的应用程序，用于演示不同框架和库的 Todo 管理功能。

使用自定义指令实现 TodoMVC

在本文中，我们将使用自定义指令在 Vue.js 中实现 TodoMVC 示例。自定义指令允许我们扩展 Vue.js 的功能，创建可重用的组件化代码块。

创建自定义指令

我们将创建两个自定义指令：

v-checkbox：用于处理单选框。
v-input：用于处理输入文本框。

在 main.js 文件中，我们可以定义这些指令：

Vue.directive('checkbox', {
  bind: function (el, binding) {
    el.checked = binding.value;
  },
  update: function (el, binding) {
    el.checked = binding.value;
  }
});

Vue.directive('input', {
  bind: function (el, binding) {
    el.value = binding.value;
  },
  update: function (el, binding) {
    el.value = binding.value;
  }
});

实现 TodoMVC 应用程序

有了这些自定义指令，我们现在可以实现 TodoMVC 应用程序：

<template>
  <div>
    <input v-model="newTodo" placeholder="What needs to be done?">
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed" v-checkbox>
        <input type="text" v-model="todo.text" v-input>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const todos = ref([]);
    const newTodo = ref('');

    const addTodo = () => {
      todos.value.push({ id: Date.now(), text: newTodo.value, completed: false });
      newTodo.value = '';
    };

    return {
      todos,
      newTodo,
      addTodo
    };
  }
};
</script>