vue的学习的增删改查

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="/vue.js"></script>

</head>

<body>

    <div id="app">

        <span>的插值表达式 只能写在文本里 ,标签的属性中不生效</span> 

        <h1>{{title}}</h1>

        <h1>插值表达式 特性1:可以调用 js 中的 属性或者方法,如:字符串的长度为 {{title.length}}</h1>

        <h1>插值表达式 特性2:可以做加减乘除,如:人民币 {{rmd}} 分 等于 {{rmb/100}}元</h1>

        <h1>插值表达式 特性3:可以做三元运算,很重要!!如:身高{{height}} 是 {{height>=180 ? 

            "<span style="color: red;">男神</span>":

            "<span style="color:chartreuse;">男人</span>"}}</h1>

        <h1>以上 是 插值表达式 ,是 作用在 文本上的</h1>

        <h1>下面的 placeholder 中使用 插值表达式 就不可以了 用别的!!</h1>

        <h1>如果 想要改变 标签属性中的文本的数据 需要绑定 这个绑定叫做指令:v-bind 缩写是 :</h1>

        <h1>v-bind 1) 可以绑定 数据 2) 可以绑定 样式---1.class 2.style ,3.数组 或者对象 样式的绑定</h1></h1>

        <h1>数据的绑定 可以是 双向的 ,简称 :双向绑定</h1>

        <input type="text" :placeholder="searchKeyWord">

        <input type="button" :value="add" >

        <h1>先看数据的单向绑定 ,使用 加法 来计算</h1>

        <h1>单向绑定 使用 插值表达式 获取结果 </h1>

        <input type="text" :value="x">+<input type="text" :value="y">=<input type="text" :value="z"><br>

        <input type="text" :value="x">+<input type="text" :value="y">={{x+y}}<br>

        x:{{x}} || y:{{y}} || z:{{z}}

        

        <h1>先看数据的双向绑定 ,使用 加法 来计算</h1>

        <input type="text" v-model="x1" >+<input type="text" v-model="y1">=<input type="text" v-model="z1"><br>

        <input type="text" v-model.number="x1">+<input type="text" v-model.number="y1">={{x1+y1}}<br>

        <input type="text" v-model="x1">*<input type="text" v-model="y1">={{x1*y1}}

        <h1>双向绑定 使用 插值表达式 获取结果 </h1>

        x1:{{x1}} || y1:{{y1}} || z1:{{z1}}

        <h1>让页面一刷新 就执行我们的方法</h1>

    </div>

    <!-- <div id="app1">

        <h1>不在 vue 的作用域中</h1>

    </div> -->

    <script>

        new Vue({

            el:'#app',

            beforeCreate () {

                //alert("vue 生命周期第一阶段 只初始化 了 new Vue ,其他啥也没干 没啥大作用!"

            },

            created () {

                //alert("该阶段处理所有选项 ,那么 Vue的ajax请求数据,应在这产生,即 ajax在这写 ,因 用户 还没看到页面渲染 ,Vue还挂载到 app")

                //this.jiajia();

            },

            beforeMount () {

              //alert("在挂载开始之前被调用 的方法 不常用!")  

            },

            mounted () {

              //alert("在实例挂载后被调用 的方法 常用! 当界面被挂载就会调用!")  

              this.jiajia();

            },

            beforeUpdate () {

              //alert("在数据发生改变后 ,DOM 被更新之前调用!")  

            },

            updated () {

              //alert("在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。!")  

            },

            data:{

                title:'vue的学习的增删改查',

                searchKeyWord:'搜索',

                add:'新增',

                rmb:500,

                height:190,

                x:50,

                y:60,

                z:0,

                x1:50,

                y1:60,

                z1:0,

            },

            methods: {

                jiajia:function(){

                    this.z=this.x+this.y

                    this.z1=this.x1+this.y1

                }

            }

        })

    </script>

</body>

</html>

<think>嗯,用户这次想找Vue3实现增删改查的示例教程。从引用内容来看,用户可能已经看过一些零碎的代码片段,比如引用[1]里的删除操作示例,但需要更系统化的指导。用户之前提供的引用内容其实挺有参考价值。引用[1]展示了一个完整的删除功能实现:用ElementUI的确认对话框,调用DelRecruitmentApi接口,处理成功/失败回调,还包含消息提示。引用[2]提到一个Vue学习案例,说明用户可能对实战项目感兴趣。考虑到用户明确要教程,我准备提供完整的CRUD实现方案。用户作为开发者,可能更关注这几个核心点:组件使用(比如ElementPlus)、API请求封装、响应式数据管理。所以在回复中,我将分别展示查询、新增、修改、删除四个功能的代码示例,每个都附带详细注释。注意到用户上次要求站内引用[^1],这次在“删除功能”部分正好可以对应引用[1]的内容。其他功能虽然没有直接引用来源,但也需要保持风格一致。最后再补充实战建议,比如推荐用CompositionAPI和Pinia——这比简单罗列代码更有价值。用户可能正在开发后台管理系统,所以补充了“常见优化策略”这部分,包含表格分页、表单验证等实用技巧。这样即使用户是中级开发者,也能获得进阶参考。最后用相关问题引导深入学习,比如问及状态管理方案选择——因为Vue3项目里用Pinia确实比Vuex更主流。</think> 下面是一个**Vue3 + Element Plus**实现增删改查(CRUD)的完整示例教程,结合用户引用[^1]的代码逻辑: --- ### 一、基础结构示例 ```vue <template> <el-table :data="tableData"> <!-- 查询数据展示 --> <el-table-column prop="name" label="名称" /> <el-table-column prop="age" label="年龄" /> <el-table-column label="操作"> <template #default="scope"> <!-- 编辑按钮 --> <el-button @click="openEditDialog(scope.row)">编辑</el-button> <!-- 删除按钮(引用[^1]逻辑) --> <el-button type="danger" @click="deleteItem(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <!-- 添加按钮 --> <el-button type="primary" @click="openAddDialog">新增数据</el-button> <!-- 编辑/新增弹窗 --> <el-dialog v-model="dialogVisible"> <el-form :model="formData"> <el-form-item label="名称"> <el-input v-model="formData.name" /> </el-form-item> <el-form-item label="年龄"> <el-input v-model="formData.age" type="number" /> </el-form-item> </el-form> <template #footer> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确认</el-button> </template> </el-dialog> </template> <script setup> import { ref, reactive, onMounted } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' // 模拟数据 const tableData = ref([ { id: 1, name: '张三', age: 25 }, { id: 2, name: '李四', age: 30 } ]) // 表单数据 const formData = reactive({ id: null, name: '', age: '' }) const dialogVisible = ref(false) const isEditMode = ref(false) // 初始化加载数据 const fetchData = async () => { // 实际项目调用API: await getListApi() console.log("加载数据成功") } onMounted(fetchData) // 打开新增弹窗 const openAddDialog = () => { Object.assign(formData, { id: null, name: '', age: '' }) isEditMode.value = false dialogVisible.value = true } // 打开编辑弹窗 const openEditDialog = (row) => { Object.assign(formData, { ...row }) isEditMode.value = true dialogVisible.value = true } // 提交表单 const submitForm = async () => { if (isEditMode.value) { // 调用更新API: await updateApi(formData) const index = tableData.value.findIndex(item => item.id === formData.id) if (index !== -1) tableData.value.splice(index, 1, { ...formData }) } else { // 调用新增API: await addApi(formData) tableData.value.push({ ...formData, id: Date.now() // 模拟新ID }) } ElMessage.success(isEditMode.value ? '更新成功' : '添加成功') dialogVisible.value = false } // 删除功能(参考引用[^1]) const deleteItem = (id) => { ElMessageBox.confirm("确认删除这条数据?", "警告", { confirmButtonText: "确认", cancelButtonText: "取消", type: "warning", }).then(async () => { // 实际调用: await DelRecruitmentApi(id) tableData.value = tableData.value.filter(item => item.id !== id) ElMessage.success("删除成功") }).catch(() => { ElMessage.info("已取消删除") }) } </script> ``` --- ### 二、核心功能说明 1. **查询功能** `fetchData()` 初始化时加载数据,实际项目需调用 `GET` 接口 2. **新增功能** - `openAddDialog()` 清空表单打开弹窗 - `submitForm()` 提交时调用 `POST` 接口 3. **编辑功能** - `openEditDialog(row)` 回填当前行数据 - `submitForm()` 根据模式调用 `PUT/PATCH` 接口 4. **删除功能** 采用 Element Plus 的确认对话框(参考用户引用[^1]),调用 `DELETE` 接口 --- ### 三、实际项目优化建议 1. **API 封装** ```javascript // api.js export const getList = () => axios.get('/api/data') export const addItem = (data) => axios.post('/api/data', data) export const updateItem = (id, data) => axios.put(`/api/data/${id}`, data) export const deleteItem = (id) => axios.delete(`/api/data/${id}`) ``` 2. **状态管理** 大型项目建议使用 `Pinia` 管理 CRUD 状态: ```javascript // stores/crudStore.js import { defineStore } from 'pinia' export const useCrudStore = defineStore('crud', { state: () => ({ data: [], currentItem: null }), actions: { async fetchData() { /* ... */ }, async deleteItem(id) { /* ... */ } } }) ``` --- ### 四、常见问题解决 1. **表单验证** 在 `<el-form>` 中添加 `rules` 属性: ```vue <el-form :rules="rules"> <el-form-item prop="name" :rules="rules.name"> <el-input v-model="formData.name" /> </el-form-item> </el-form> <script> const rules = { name: [{ required: true, message: '名称必填', trigger: 'blur' }] } </script> ``` 2. **加载状态** 使用 `loading` 变量控制按钮状态: ```vue <el-button :loading="submitting" @click="submitForm" >提交</el-button> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值