vue项目实现添加，修改、删除效果

最新推荐文章于 2024-06-15 15:21:05 发布

余一痴

最新推荐文章于 2024-06-15 15:21:05 发布

阅读量1.2w

点赞数 9

分类专栏：前端文章标签： vue javascript css html5 node.js

本文链接：https://blog.csdn.net/yycnf/article/details/108328203

版权

本文介绍了如何使用Vue框架结合Element-UI库来创建项目，并实现添加、修改和删除功能。首先通过vue create命令初始化项目，接着安装element-ui，然后启动项目并配置main.js。所有代码实现均在Home.vue组件中完成。

摘要由CSDN通过智能技术生成

使用vue实现以下效果：

1、创建vue项目

vue create libary

2、cd libary 进入libary文件

3、下载需要用到的模块（这里用的是element-ui）

cnpm i element- ui --save

4、启动项目

npm run serve

5、配置main.js文件

import ElementUi from "element-ui";//引入element-ui模块
import "element-ui/lib/theme-chalk/index.css";//引入element-ui的css样式
Vue.use(ElementUi);//使用ElementUi

6、因为只有一个页面，故在Home.vue中书写即可，具体代码如下：

<template>
  <div>
    <h3>图书管理</h3>

    <div class="heard_search_container">

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="编号:">
          <el-input v-model="inpu