一个基于 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>,并相应地调整样式和事件绑定。

相关推荐
慧一居士12 分钟前
CSS3 全部功能点介绍,使用场景,对应功能点完整使用示例
前端
烛阴15 分钟前
深入Lua包(Package)与依赖管理
前端·lua
IT_陈寒28 分钟前
5个Vue3性能优化技巧,让你的应用提速50% 🚀(附实测对比)
前端·人工智能·后端
god0030 分钟前
chromium项目中添加源文件(BUILD.gn项目中添加源文件)
java·服务器·前端
快乐非自愿39 分钟前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存
Github掘金计划40 分钟前
别再用 “臃肿监控” 了!这款轻量监控神器开源 3 月狂揽 1.3k Star!
前端·监控
努力学习的少女1 小时前
SpaekSql函数
前端·数据库
摸着石头过河的石头1 小时前
错误处理:构建健壮的 JavaScript 应用
前端·javascript
w_y_fan1 小时前
flutter_native_splash: ^2.4.7
android·前端·flutter
穿花云烛展1 小时前
项目实战4:奇思妙想console
前端