一个基于 Vue.js 实现的简单增删改查(CRUD)案例

以下是一个基于 Vue.js 实现的简单增删改查(CRUD)案例,使用了 Vue CLI 创建项目,并假设你已经安装了 Vue CLI。这个案例将展示如何创建一个简单的待办事项列表(Todo List),实现添加、删除、编辑和查询功能。

步骤一:创建 Vue 项目

bash 复制代码
vue create todo-app
cd todo-app

步骤二:安装并引入 Element UI(可选,用于提供UI组件)

bash 复制代码
vue add element

步骤三:在 src/components 目录下创建 Todo.vue 文件

html 复制代码
<!-- Todo.vue -->
<template>
  <div class="todo-list">
    <el-input v-model="newTodoText" placeholder="请输入新的待办事项" @keyup.enter="addTodo"></el-input>
    <transition-group name="list" tag="p">
      <div v-for="(todo, index) in todos" :key="todo.id" :class="{ completed: todo.completed }">
        <span>{{ todo.text }}</span>
        <el-button size="mini" @click="toggleTodo(todo)">完成</el-button>
        <el-button size="mini" @click="editTodo(todo, index)">编辑</el-button>
        <el-button size="mini" type="danger" @click="removeTodo(index)">删除</el-button>
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodoText: '',
      todos: [
        // 初始化一些示例数据(可选)
        { id: 1, text: '学习Vue', completed: false },
        { id: 2, text: '练习CRUD', completed: true }
      ]
    };
  },
  methods: {
    addTodo() {
      if (this.newTodoText.trim()) {
        this.todos.push({
          id: Date.now(),
          text: this.newTodoText,
          completed: false
        });
        this.newTodoText = '';
      }
    },
    toggleTodo(todo) {
      todo.completed = !todo.completed;
    },
    editTodo(todo, index) {
      // 这里仅作示例,实际应用中可以弹出编辑框或使用v-model动态更新文本
      console.log('Edit:', todo, index);
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.todo-list {
  margin-bottom: 20px;
}

.completed {
  text-decoration: line-through;
}
</style>

步骤四:在 src/App.vue 中引入并使用 Todo 组件

html 复制代码
<!-- App.vue -->
<template>
  <div id="app">
    <Todo></Todo>
  </div>
</template>

<script>
import Todo from '@/components/Todo.vue';

export default {
  components: {
    Todo
  }
};
</script>

现在运行项目:

bash 复制代码
npm run serve

打开浏览器访问 http://localhost:8080,你应该能看到一个简单的待办事项列表,可以添加、删除、标记完成和编辑(此处仅打印编辑信息到控制台)待办事项。

注意:本示例使用了 Element UI 提供的 UI 组件,如果你没有安装 Element UI,可以使用原生 HTML 元素和 CSS 类替换,如使用 <input> 替换 <el-input>,使用 <button> 替换 <el-button>,并相应地调整样式和事件绑定。

相关推荐
yqcoder7 分钟前
NPM 包管理问题汇总
前端·npm·node.js
程序菜鸟营13 分钟前
nvm安装详细教程(安装nvm、node、npm、cnpm、yarn及环境变量配置)
前端·npm·node.js
bsr198324 分钟前
前端路由的hash模式和history模式
前端·history·hash·路由模式
Swift社区34 分钟前
统计文本文件中单词频率的 Swift 与 Bash 实现详解
vue.js·leetcode·机器学习
杨过姑父1 小时前
ES6 简单练习笔记--变量申明
前端·笔记·es6
Jacob程序员1 小时前
leaflet绘制室内平面图
android·开发语言·javascript
Sunny_lxm1 小时前
<keep-alive> <component ></component> </keep-alive>缓存的组件实现组件,实现组件切换时每次都执行指定方法
前端·缓存·component·active
eguid_11 小时前
JavaScript图像处理,常用图像边缘检测算法简单介绍说明
javascript·图像处理·算法·计算机视觉
sunly_2 小时前
Flutter:自定义Tab切换,订单列表页tab,tab吸顶
开发语言·javascript·flutter
Zero_pl2 小时前
vue学习路线
vue.js