精华内容
下载资源
问答
  • vue增删改查

    2019-03-22 09:57:15
    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作。比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改。在vue中,我们更应该专注于...

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作。比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改。在vue中,我们更应该专注于对数据的操作和处理。

    比如我们有一个这样的页面:

    我们在这个页面里,就实现了增删改查4个功能,点击链接查看demo【//www.xiabingbao.com/demos/20190304/vue-curd.html】。

    我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行:

    list: [
        {
            username: 'aaaaa',
            email: '123@qq.com',
            sex: '男',
            province: '北京市',
            hobby: ['篮球', '读书', '编程']
        },
        {
            username: 'bbbbb',
            email: 'bbbbbbb@163.com',
            sex: '女',
            province: '河北省',
            hobby: ['弹琴', '读书', '插画']
        }
        // ...
    ]

    设置这些数据主要也是复习一下vue对表单的处理操作,这里面的表单有:文本输入框,单选按钮,select选择框,复选框等。

    1. 展示数据

    我们的数据都放在数组list中,但是这里并不直接对list对循环输出,而是先把list中的数据给一个数组slist,对slist进行循环输出。因为我们在后面的查询功能中需要对数据进行过滤,数组list一直保存着原始数据(包括新增、修改后或已删除后),而数组slist只负责展示。

    在vue中提供一个setSlist方法,将需要展示的数据给了数组slist:

    // 获取需要渲染到页面中的数据
    setSlist(arr) {
        this.slist = JSON.parse(JSON.stringify(arr));
    }

    然后在html中使用v-for把slist数组渲染出来:

    <tr v-cloak v-for="(item, index) of slist">
        <td>{{index+1}}</td>
        <td>{{item.username}}</td>
        <td>{{item.email}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.province}}</td>
        <td>{{item.hobby.join(' | ')}}</td>
        <td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">删除</a></td>
    </tr>

    在操作这一栏中,给修改和删除操作绑定上事件。

    2. 增加和删除功能

    把增加功能和删除合并到一起,是这两个功能相对来说都比较简单。

    增加用户时使用push方法,把用户的信息添加到list数组的最后:

    this.list.push({
        username: 'ffff',
        email: 'fffffff@163.com',
        sex: '女',
        province: '河南省',
        hobby: ['弹琴', '插画']
    });

    这样就能添加一位ffff的用户了。

    删除用户时,通过splice(index, 1),可以删除index位置的数据,页面上的数据自动就会更新。

    3. 修改功能

    当我们想要修改某个元素时,可以把这个位置上的数据取出来放到弹层里(或者其他某个位置),在弹层里的信息可以取消或者修改后进行保存。

    假设我们弹层里的数据是selectedlist,那么每次修改时,把index位置的数据给了selectedlist,然后在弹层中修改selectedlist。我们也能看到修改数据的类型: 文本框(用户名,邮箱),单选按钮(性别),select选择框(所在省份),多选框(爱好),这里我们主要练习的是表单处理(https://cn.vuejs.org/v2/guide/forms.html)。弹层是否显示用变量isActive来控制:

    // 修改数据
    modifyData(index) {
        this.selected = index; // 修改的位置
        this.selectedlist = this.list[index];
        this.isActive = true;
    }

    有没有发现一个问题,当修改弹层中的信息时,表格中的数据也同步更新了。可是我们本身是希望当点击保存按钮时,才把弹层中的数据保存到表格里。问题的根源就出在这里:

    this.selectedlist = this.list[index];

    因为list[index]是个Object类型的数据,若使用=赋值,则赋值操作为浅度拷贝(把数据的地址赋值给对应变量,而没有把具体的数据复制给变量,变量会随数据值的变化而变化),selectedlist与list[index]使用相同的数据地址,互相引起数据值的变化。因此这里我们需要进行深度拷贝:

    this.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); // 先转换为字符串,然后再转换

    当用户修改数据后,selectedlist就会发生变化,点击保存按钮时,将数据重新保存到index位置:

    /*
      this.list 数据数组
      this.selected 刚才修改的位置
      this.selectedlist 需要保存的数据
    */
    Vue.set(this.list, this.selected, this.selectedlist);

    4. 查询功能

    在第1小节中我们已经说过,在页面表格中展示的是slist中的数据,就是为了方便执行查询操作:

    // 获取需要渲染到页面中的数据
    setSlist(arr) {
        this.slist = JSON.parse(JSON.stringify(arr));
    }

    每次根据某些条件将过滤后的数据赋值给slist数组,展示出查询后的数据。这里我们的查询实现了两个小功能:

    1. 用户在输入某个字符后,自动在输入框下方用列表展示出用户可能要查询的词语(如用户名等)

    2. 同步更新表格中的数据

    这里我们通过用户名和邮箱进行查询,因此在过滤数据时,需要检测用户名和邮箱是否含有查询的单词。我们先给输入框绑定一个input事件,同时用datalist展示用户可能要查询的词语:

    <input type="text" placeholder="search" @input="search" list="cars" class="search">
    <datalist id="cars">
        <option v-for="item in searchlist" :value="item"></option>
    </datalist>

    search功能的实现,searchlist为在输入框下方展示的可能要搜索的词语,ss数组则保存过滤后的数据,当循环完毕后,设置调用setSlist方法修改slist数组:

    // 搜索
    search(e) {
        var v = e.target.value,
            self = this;
        self.searchlist = [];
        if (v) {
            var ss = [];
    
            // 过滤需要的数据
            this.list.forEach(function (item) {
                // 检测用户名
                if (item.username.indexOf(v) > -1) {
                    if (self.searchlist.indexOf(item.username) == -1) {
                        self.searchlist.push(item.username);
                    }
                    ss.push(item);
                } else if (item.email.indexOf(v) > -1) {
                    // 检测邮箱
                    if (self.searchlist.indexOf(item.email) == -1) {
                        self.searchlist.push(item.email);
                    }
                    ss.push(item);
                }
            });
            this.setSlist(ss); // 将过滤后的数据给了slist
        } else {
            // 没有搜索内容,则展示全部数据
            this.setSlist(this.list);
        }
    }

    每当用户输入或者删除一个字符时都会调用search方法,执行查询操作,当用点击展示词语列表时,也会调用search方法。

    5. 将弹层独立为组件

    其实我们应该发现,修改功能(或新增功能)从代码和样式上相对来说比较独立,我们把弹层独立为组件的形式,把需要修改的数据通过props传递给该组件(新增数据时,可以给组件传递一个空数据),当用户点击保存时,再通过$emit给了父组件(子组件不能直接父级的数据,需要用data或者computed生成一个局部变量,然后再使用$emit方法把这个局部数据再传递上去):

    // 弹层组件 
    Vue.component('model', {
        props: ['list', 'isactive'],
        template: `<div class="overlay" v-show="isactive">
                        <div class="con">
                            <h2 class="title">新增 | 修改</h2>
                            <div class="content">
                                /* 省略 */
                            </div>
                        </div>
                   </div>`,
        computed: {
            modifylist() {
                return this.list;
            }
        },
        methods: {
            changeActive() {
                this.$emit('change'); // 关闭弹层,修改isactive值
            },
            modify() {
                this.$emit('modify', this.modifylist); // 将修改后的数据传递给父组件
            }
        }
    });

    父组件,在父组件中截取changemodify事件,再用changeOverlaymodify来实现:

    <model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>

    6. 总结

    洋洋洒洒写了不少,其实里面的难点不太多,主要是form表单方面的操作,再一个就是练习下组件间的数据与事件传递。内容比较简单,欢迎各位批评指正。

     

    内容转载自 :https://www.xiabingbao.com/vue/2017/07/10/vue-curd.html

     

    更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1

    展开全文
  • 主要为大家详细介绍了vue增删改查的简单操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 增删改查

    2019-01-10 14:33:00
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<...script src="vue-2.5.13.min.js"></script> <style&...
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue-2.5.13.min.js"></script>
    <style>
    * {
    padding: 0;
    margin: 0;
    position: relative;
    }

    /* 实现任意无宽高盒子居中显示 */
    #app {
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translateX(-50%);
    }

    .box {
    width: 500px;
    height: 40px;
    background-color: #ccc;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    border: 1px solid #aaa;
    box-sizing: border-box;
    border-bottom: none;
    }

    .tb {
    width: 500px;
    text-align: center;
    border-collapse: collapse;
    border-color: #ccc;
    }
    </style>
    </head>

    <body>
    <div id="app">
    <div class="box">
    <label for="id">
    ID:
    <input type="text" id="id" v-model="id">
    </label>
    <label for="name">
    name:
    <input type="text" id="name" v-model="name">
    </label>
    <input type="button" value="add" @click="addClick">
    </div>

    <table border="1" cellspacing="0" class="tb">
    <tr v-for="item in list">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.ctime}}</td>
    <td>
    <!-- 绑定的事件是可以传参数的,这里传入需要删除的对象id -->
    <a href="javascript:;" @click.prevent="delClick(item.id)">del</a>
    </td>
    </tr>
    </table>
    </div>


    <script>
    var vm = new Vue({
    el: "#app",
    data: {
    id: "",
    name: "",
    list: [{
    id: 1,
    name: 'tony',
    ctime: new Date()
    },
    {
    id: 2,
    name: 'stark',
    ctime: new Date()
    }
    ]
    },
    methods: {
    addClick() {
    // 1.获取表单数据
    // 2.组织出一个对象
    // 3.将对象添加到data中(不需要重新渲染页面)
    let item = {
    id: this.id,
    name: this.name,
    ctime: new Date()
    };
    if ((this.id != "") && (this.name != "")) {
    this.list.push(item);
    }
    // 4.最后将表单清空
    this.id = this.name = "";
    },
    delClick(id) {
    // 1.根据id找到索引(循环查找)
    // 2.调用数组的 splice方法删除
    this.list.filter((item, index) => {
    if (item.id == id) {
    this.list.splice(index, 1);
    return true;
    }
    });

    }
    }

    });
    </script>
    </body>
    </html>

    转载于:https://www.cnblogs.com/wu50401/p/10249820.html

    展开全文
  • 本文为大家分享了vue增删改查的简单操作,供大家参考,具体内容如下我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行:这里面的表单有:文本输入框,单选按钮,select选择框,复选框等。...

    本文为大家分享了vue增删改查的简单操作,供大家参考,具体内容如下

    我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行:

    这里面的表单有:文本输入框,单选按钮,select选择框,复选框等。

    1. 展示数据

    我们的数据都放在数组list中,但是这里并不直接对list对循环输出,而是先把list中的数据给一个数组slist,对slist进行循环输出。因为我们在后面的查询功能中需要对数据进行过滤,数组list一直保存着原始数据(包括新增、修改后或已删除后),而数组slist只负责展示。

    在vue中提供一个setSlist方法,将需要展示的数据给了数组slist:

    然后在html中使用v-for把slist数组渲染出来:

    |

    在操作这一栏中,给修改和删除操作绑定上事件。

    2. 增加和删除功能

    把增加功能和删除合并到一起,是这两个功能相对来说都比较简单。

    增加用户时使用push方法,把用户的信息添加到list数组的最后:

    这样就能添加一位ffff的用户了。

    删除用户时,通过splice(index,1),可以删除index位置的数据,页面上的数据自动就会更新。

    3. 修改功能

    假设我们弹层里的数据是selectedlist,那么每次修改时,把index位置的数据给了selectedlist,然后在弹层中修改selectedlist。我们也能看到修改数据的类型: 文本框(用户名,邮箱),单选按钮(性别),select选择框(所在省份),多选框(爱好),这里我们主要练习的是表单处理()。弹层是否显示用变量isActive来控制:

    有没有发现一个问题,当修改弹层中的信息时,表格中的数据也同步更新了。可是我们本身是希望当点击保存按钮时,才把弹层中的数据保存到表格里。问题的根源就出在这里:

    因为list[index]是个Object类型的数据,若使用=赋值,则赋值操作为浅度拷贝(把数据的地址赋值给对应变量,而没有把具体的数据复制给变量,变量会随数据值的变化而变化),selectedlist与list[index]使用相同的数据地址,互相引起数据值的变化。因此这里我们需要进行深度拷贝:

    当用户修改数据后,selectedlist就会发生变化,点击保存按钮时,将数据重新保存到index位置:

    4. 查询功能

    在第1小节中我们已经说过,在页面表格中展示的是slist中的数据,就是为了方便执行查询操作:

    每次根据某些条件将过滤后的数据赋值给slist数组,展示出查询后的数据。这里我们的查询实现了两个小功能:

    1、用户在输入某个字符后,自动在输入框下方用列表展示出用户可能要查询的词语(如用户名等)

    2、同步更新表格中的数据

    这里我们通过用户名和邮箱进行查询,因此在过滤数据时,需要检测用户名和邮箱是否含有查询的单词。我们先给输入框绑定一个input事件,同时用datalist展示用户可能要查询的词语:

    search功能的实现,searchlist为在输入框下方展示的可能要搜索的词语,ss数组则保存过滤后的数据,当循环完毕后,设置调用setSlist方法修改slist数组:

    每当用户输入或者删除一个字符时都会调用search方法,执行查询操作,当用点击展示词语列表时,也会调用search方法。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    展开全文
  • vue 增删改查初体验

    2020-12-24 19:26:47
    例子是一个费用报销单报销增删改查,内容有些不是很全,有时间慢慢补充。 demo的地址:https://github.com/git407949480/vue-fybxd-mock-curd 一、vue脚手架 1、全局安装vue-cli npmi-gvue-cli 2、vue脚手架...

    公司最近要使用vue框架开发移动端应用,自己也积极响应公司安排,又将vue拾起来,边学边练,制作了一个vue-curd的demo,在此记录下学习内容,希望对你也有所帮助。

    例子是一个费用报销单报销增删改查,内容有些不是很全,有时间慢慢补充。

    demo源码的git地址:https://github.com/git407949480/vue-fybxd-mock-curd

    一、vue脚手架

    1、全局安装vue-cli

    npm i -g vue-cli

    2、vue脚手架搭建vue工程

    vue脚手架官网

    vue create hello-world
    
    cd hello-world
    
    npm run serve,执行该命令时无需指定端口号,如果有冲突,会自动修改端口号
    
    指定端口号:npm run serve -- --port 5000

    有问题,如can not find module,执行npm i --verbose,安装对应的包

    二、vue mock数据

    更多mock相关的操作,请参照 mockjs官网

    1、安装mockjs

    install mockjs --save
    
    // 安装到devDependencies

    2、在src目录下,新建mock文件夹,然后新建mock.js,然后在mock.js填入如下

    import Mock from 'mockjs'
    const Random = Mock.Random
    // mock需要给三个参数,url(与axios请求是传的url一致)
    
    // 请求类型: get post...其他看文档
    
    // 数据处理函数,函数需要return数据
    
    // 这样就构件了一个服务端api接口
    
    Mock.mock('http://localhost:8080/login/login', 'get', (res) => {
    
        console.log(res);
    
        return 11;
    
    })
    
    ……
    
    // 其他根据自己小自行添加

    3、在入口文件main.ts中,引入我们的mock.js

    ……
    
    import './mock/mock.js'
    
    ……

    三、本地请求json数据(即本地json文件)

    相关的json文件放入public目录下,大坑

    https://blog.csdn.net/qq407949480/article/details/111236646

    四、安装及使用axios\vue-axios

    更多axios相关,请参照 使用 axios 访问 API

    1、安装axios\vue-axios

    npm install --save axios vue-axios

    2、在入口文件main.ts中,引入axios\vue-axios

    import Axios from 'axios'
    import Vue from 'vue'
    import VueAxios from 'vue-axios'
    ……
    
    Vue.use(VueAxios, Axios);

    3、具体使用,目前只用到get请求

    this.axios.get("/data.json")
            .then((res) => {
              console.log(res);
            })
            .catch((error) => {
              console.log(error);
            });

    4、请求拦截器、响应拦截器(没深入研究,暂时记录)

    请求拦截器:该类拦截器的作用是在请求发送前统一执行某些操作,比如在请求头中添加 token 字段。

    响应拦截器:该类拦截器的作用是在接收到服务器响应后统一执行某些操作,比如发现响应状态码为 401 时,自动跳转到登录页。

    五、路由

    这里使用的是vue-router库,更多vue路由相关,请参照 vue-router库

    1、简介

    route:首先它是个单数,译为路由,即我们可以理解为单个路由或者某一个路由;  

    routes:它是个复数,表示多个的集合才能为复数;即我们可以理解为多个路由的集合,JS中表示多种不同状态的集合的形式只有数组和对象两种,事实上官方定义routes是一个数组;所以我们记住了,routes表示多个数组的集合;  

    router:译为路由器,上面都是路由,这个是路由器,我们可以理解为一个容器包含上述两个或者说它是一个管理者,负责管理上述两个;举个常见的场景的例子:当用户在页面上点击按钮的时候,这个时候router就会去routes中去查找route,就是说路由器会去路由集合中找对应的路由; 

    2、路由入口

    路由入口: 'src/router/index.ts' ,通过vue脚手架搭建的工程,我们选择配置是将路由选项选上,脚手架会帮我们自动注册路由。

    手动注册可参照下面,先安装vue-router

    npm install vue-router

     在main.ts中注册vue-router

    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

    路由占位符:<router-view></router-view>

    3、路由跳转方式

    <router-link to="/">Home</router-link>  

    路由名称无参数<router-link :to="{name:'home'}"> Home</router-link>  

    路由路径无参数<router-link :to="{path:'/home'}">Home</router-link>  

    路由名称带参数<router-link :to="{name:'home', params: {id:1}}"> Home</router-link>  

    路由路径带参数<router-link :to="{name:'home', query: {id:1}}"> Home</router-link>  

     

    query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params,刷新页面该传参方式的id还在。  

    params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失。  

     

    编程式跳转:

    this.$router.push('/home')

    this.$router.push({name:'home'})

    this.$router.push({path:'/home'})

    this.$router.push({name:'home',query: {id:'1'}})

    this.$router.push({path:'/home',query: {id:'1'}})

    //只能用 name,不能使用path

    this.$router.push({name:'home',params: {id:'1'}})

    路由参数接受:

    this.$route.params.id

    this.$route.query.id

    4、路由守卫

    当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

    本实例,路由守卫的主要作用是未登录,禁止访问其他页面

    router.beforeEach((to, from, next) => {
        //我在这里模仿了一个获取用户信息的方法
        let isLogin = window.sessionStorage.getItem('sessionId');
        if (isLogin) {
            //如果用户信息存在则往下执行。
            next()
        } else {
            //如果用户token不存在则跳转到login页面
            if (to.path === '/login') {
                next()
            } else {
                next('/login')
            }
        }
    })

    六、vuex状态

    更多vue状态管理相关,请参照 vuex相关简介

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

    vuex的注册方式可参照上一步

    export default new Vuex.Store({
        state: {
            sessionId: '',
            userName: ''
        },
    
        mutations: {
            modifySessionId(state, playload) {
                state.sessionId = playload;
            },
            modifyUserName(state, playload){
                state.userName = playload;
            }
        },
        actions: {
    
        },
    
        modules: {
    
        }
    })

    七、生命周期

    更多vue生命周期相关,请参照 vue生命周期相关

    八、vue.config.js

    主要是用到configureWebpack devtool source-map,运行起来在调试的时候,是压缩版本,不好调试,所以讲启用sourc-map

    vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。

    更多webpack相关,请参照[webpack相关简介](https://www.webpackjs.com/)

    vue.config.js配置F12调试的时候是非压缩版

    module.exports = {
        ......
    
        configureWebpack: {
            devtool: 'source-map'
        }
        ...
    }

    九、vue双向绑定问题中,不能实现及时更新的问题:

    1、不在data中显式声明的对象不能及时更新  

    2、在form中,经过v-model的变量 或 在其他html标签中 使用v-bind:方法的变量才能及时更新  

    3、vue不能检测到对象属性的增加,修改,删除, 不能及时触发DOM的更新,需要借用其他的更新。   

    4、vue不能检测数组的项修改(根据index)、length修改(仅此而已,可直接对数组重新赋值,如使用filter、map、concat、slice等方式生成新数组对其赋值)




     

    展开全文
  • 顶 mongo客户端mongo VUE增删改查 发表于11个月前(2013-12-27 16:28) 阅读(673) | 评论(0) 0人收藏此文章,我要收藏 赞0 一、先创建一张mongo表,右击已创建的数据库test,点击addcollection.. ...
  • springboot+vue增删改查

    2019-10-21 14:55:00
    SpringBoot+Vue增删改查 首先:创建好springboot项目之后 1.显示 html页面 <tr> <td align="center">编号</td> <td align="center">姓名</td> <td align="center"&...
  • fullcalendar 一款 star高达12.6K+ 基于jQuery实现的管理日程安排、工作计划的日历工具。今天给大家分享如何在Vue...支持增删改查及拖拽式管理日程安排。安装$ npm i @fullcalendar/vue @fullcalendar/daygrid -S...
  • 纯JS+HTML简单表格增删改查 vue第二种实现全选/反选方式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src=...
  • vxe-table vue 增删改查表格组件

    万次阅读 热门讨论 2019-01-26 19:49:40
    查看 Github 功能点: 支持单列编辑 ...支持////还原 支持原 ElTable 所有参数及功能 API Editable Attributes &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
  • Vue 增删改查 demo

    2018-12-02 18:57:00
    ="../../Scripts/vue.js" > script > head > < body > < div id ="app" > < form > 名称: < input type ="text" name ="giftPack.name" v-model ="giftPack.name" /> 是否开启: < input ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,927
精华内容 770
关键字:

vue增删改查

vue 订阅