Vue

Vue.js 实战:构建一个简单的待办事项应用

白衣少年
2024-11-23 / 0 评论 / 6 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2024年11月23日,已超过13天没有更新,若内容或图片失效,请留言反馈。

Vue.js 实战:构建一个简单的待办事项应用

引言

Vue.js 是一个渐进式JavaScript框架,用于构建用户界面。由于其轻量级和易上手的特点,Vue.js 成为了前端开发者的首选工具之一。本文将带你一步步构建一个简单的待办事项应用,展示Vue.js的基本功能和组件化思想。

准备工作

在开始之前,请确保你已经安装了Node.js和npm(Node Package Manager)。此外,我们还需要安装Vue CLI(命令行界面),以便于快速创建和管理Vue项目。

npm install -g @vue/cli

创建Vue项目

使用Vue CLI创建一个新的Vue项目:

vue create todo-app

按照提示选择默认配置或根据需要自定义配置。创建完成后,进入项目目录:

cd todo-app

项目结构

我们的项目结构将非常简单,主要包含以下文件:

  • src/main.js:Vue应用的入口文件。
  • src/App.vue:根组件。
  • src/components/TodoList.vue:待办事项列表组件。
  • src/components/TodoItem.vue:单个待办事项组件。

编码实现

  1. 更新 src/main.js

    该文件通常不需要太多修改,只需确保导入了App组件并挂载到DOM上即可。

    import Vue from 'vue'
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')
  2. 更新 src/App.vue

    在App.vue中,我们将使用TodoList组件,并管理待办事项的数据。

    <template>
      <div id="app">
        <h1>Todo List</h1>
        <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo">
        <TodoList :todos="todos" @remove="removeTodo" />
      </div>
    </template>
    
    <script>
    import TodoList from './components/TodoList.vue'
    
    export default {
      name: 'App',
      components: {
        TodoList
      },
      data() {
        return {
          newTodo: '',
          todos: []
        }
      },
      methods: {
        addTodo() {
          if (this.newTodo.trim() !== '') {
            this.todos.push({
              text: this.newTodo,
              id: Date.now()
            });
            this.newTodo = '';
          }
        },
        removeTodo(id) {
          this.todos = this.todos.filter(todo => todo.id !== id);
        }
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    input {
      padding: 10px;
      font-size: 16px;
      margin-bottom: 20px;
    }
    </style>
  3. 创建 src/components/TodoList.vue

    这个组件将渲染待办事项列表,并处理删除操作。

    <template>
      <ul>
        <TodoItem
          v-for="todo in todos"
          :key="todo.id"
          :text="todo.text"
          @remove="removeTodo"
          :todo-id="todo.id"
        />
      </ul>
    </template>
    
    <script>
    import TodoItem from './TodoItem.vue'
    
    export default {
      name: 'TodoList',
      props: {
        todos: {
          type: Array,
          required: true
        }
      },
      components: {
        TodoItem
      },
      methods: {
        removeTodo(id) {
          this.$emit('remove', id);
        }
      }
    }
    </script>
    
    <style scoped>
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      background: #fff;
      margin: 5px 0;
      padding: 10px;
      border: 1px solid #ddd;
    }
    </style>
  4. 创建 src/components/TodoItem.vue

    这个组件将渲染单个待办事项,并处理删除按钮的点击事件。

    <template>
      <li>
        <span>{{ text }}</span>
        <button @click="removeTodo">Remove</button>
      </li>
    </template>
    
    <script>
    export default {
      name: 'TodoItem',
      props: {
        text: {
          type: String,
          required: true
        },
        todoId: {
          type: Number,
          required: true
        }
      },
      methods: {
        removeTodo() {
          this.$emit('remove', this.todoId);
        }
      }
    }
    </script>
    
    <style scoped>
    button {
      margin-left: 10px;
      background: #c0392b;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
    button:hover {
      background: #e74c3c;
    }
    </style>

运行应用

在项目根目录下运行以下命令,启动开发服务器:

npm run serve

打开浏览器,访问 http://localhost:8080,你应该能看到一个简单的待办事项应用。你可以添加新的待办事项,并通过点击“Remove”按钮删除它们。

结论

通过本文,我们展示了如何使用Vue.js创建一个简单的待办事项应用。这个示例展示了Vue.js的基本特性,包括数据绑定、事件处理、组件化开发等。Vue.js的强大之处在于其渐进式架构,你可以根据需要逐步引入更复杂的特性和工具,如Vue Router、Vuex等。


这个案例代码提供了一个基础框架,你可以在此基础上继续扩展功能,例如添加编辑功能、实现待办事项的完成状态等。希望这篇文章对你有所帮助!

1

打赏

评论 (0)

OwO
取消