vue基础练习 - 用户管理

分手后的思念是犯贱 2023-06-18 11:55 30阅读 0赞

**特别声明一****：** 本文主要学习并整理自51CTO课程`《Vue.js 2.0之全家桶系列视频课程》`，讲师`汤小洋`，跳转链接见文末。

**特别声明二****：** 本文核心内容全部来自51CTO课程《Vue.js 2.0之全家桶系列视频课程》，`本人只是照着视频课程敲了一遍代码，并对其中大部分bootstrap样式进行了注释说明`；所以`本文定义为翻译`。

--------------------

**目的说明：** 为了巩固前几篇vue博文学习的知识，本文这里做一个小练习。

# 用户管理 - 练习： #

## 练习要求： ##

*  需要做出一个简单的页面(如下图)：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center]
 *  在删除时，希望有所提示(如下图)：  
    ![在这里插入图片描述][20191202131552771.png_pic_center]

## 代码实现： ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>用户管理 - 练习</title>
        <script src="../../node.js/repository/node_modules/vue/dist/vue.min.js"></script>
        
        <script src="../../node.js/repository/node_modules/_jquery@1.9.1@jquery/jquery.min.js" type="text/javascript"></script>
        <link href="../../node.js/repository/node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="../../node.js/repository/node_modules/_bootstrap@3.3.7@bootstrap/dist//js/bootstrap.min.js" type="text/javascript"></script>
        <script> window.onload = function () { let vm = new Vue({ el: '#jd', data: { users: [ { name: '张三', age: 25, email: 'zhangsan@163.com' }, { name: '李四', age: 18, email: 'lisi@gmail.com' } ], user: { }, // 用于标记要删除的元素索引 currentIndex: -1 }, methods: { // 添加用户 addUser() { let shouldAdd = this.user.name != undefined && this.user.name != ''; if (shouldAdd) { this.users.push(this.user); }; this.user = { }; }, // 重置输入框信息 resetUser() { this.user = { }; }, // 删除当前用户 doDel() { if (this.currentIndex == -1) { this.users = []; return; }; /* * splice主要用于对数组/集合进行 添加、删除、替换，这里只介绍其删除功能: * 删除功能。两个参数，第一个参数为 => 要删除的元素们的起始位置(要删除的第一个元素的索引位置), * 第二个参数为 => 要删除的元素个数。 */ this.users.splice(this.currentIndex, 1); } } }); } </script>
    </head>
    
    
    
    
    <body>
    
        
        <div class="container" id="jd">
    
            
            
            <h2 class="text-center">添加用户</h2>
            
            <form class="form-horizontal">
                
                <div class="form-group">
    
                    
                    
                    <label for="name" class="control-label col-sm-2 col-sm-offset-2">姓 名：</label>
                    
                    <div class="col-sm-6">
                        
                        <input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">
                    </div>
                </div>
    
                <div class="form-group">
                    <label for="age" class="control-label col-sm-2 col-sm-offset-2">年 龄：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
                    </div>
                </div>
    
                <div class="form-group">
                    <label for="email" class="control-label col-sm-2 col-sm-offset-2">邮 箱：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">
                    </div>
                </div>
    
                <div class="form-group text-center">
                    
                    <input type="button" value="添加" class="btn btn-success" v-on:click="addUser()" />
                    <input type="reset" value="重置" class="btn btn-warning" @click="resetUser()" />
                </div>
            </form>
    
            <hr>
            
            
            <table class="table table-bordered table-hover">
                
                <caption class="h3 text-center text-info">用户列表</caption>
                <thead>
                    <tr>
                        <td class="text-center">序号</td>
                        <td class="text-center">姓名</td>
                        <td class="text-center">年龄</td>
                        <td class="text-center">邮箱</td>
                        <td class="text-center">操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(v, k) in users" class="text-center">
                        <td class="text-center">{
       {k + 1}}</td>
                        <td class="text-center">{
       {v.name}}</td>
                        <td class="text-center">{
       {v.age}}</td>
                        <td class="text-center">{
       {v.email}}</td>
                        <td class="text-center">
                            
                            <button class="btn btn-danger btn-sm" v-on:click="currentIndex = k" data-toggle="modal" data-target="#del">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5" class="text-right">
                            
                            <button class="btn btn-danger btn-sm" v-on:click="currentIndex = -1" data-toggle="modal" data-target="#del">全部删除</button>
                        </td>
                    </tr>
                </tbody>
    
            </table>
    
    
            
            
            <div class="modal fade" id="del">
                
                <div class="modal-dialog">
                    
                    <div class="modal-content">
                        
                        <div class="modal-header text-center">
                            
                            <button class="close" data-dismiss="modal">
                                
                                <span>×</span>
                            </button>
                            
                            <h3 class="modal-title" v-show="currentIndex !== -1">确认删除
                                {
       {users[currentIndex] ? users[currentIndex].name : ''}} 吗?</h3>
                            <h3 class="modal-title" v-show="currentIndex === -1">确认删除 所有项 吗?</h3>
                        </div>
                        
                        <div class="modal-body text-center">
                            <button class="btn btn-primary" data-dismiss="modal">取消</button>
                            <button class="btn btn-danger" data-dismiss="modal" v-on:click="doDel()">确认</button>
                        </div>
                    </div>
                </div>
    
            </div>
        </div>
    
    
    </body>
    
    </html>

提示：代码中除了vue的知识外，还涉及一些bootstrap的样式知识点。

## 效果展示：![在这里插入图片描述][20191202131826555.gif_pic_center] ##

**^\_^ 如有不当之处，欢迎指正**

**^\_^ 学习整理自  
        **[51CTO课程《Vue.js 2.0之全家桶系列视频课程》讲师 汤小洋][51CTO_Vue.js 2.0_]

**^\_^ 本文已经被收录进《程序员成长笔记(六)》，笔者JustryDeng**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20191202131536530.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[20191202131552771.png_pic_center]: https://img-blog.csdnimg.cn/20191202131552771.png#pic_center
[20191202131826555.gif_pic_center]: https://img-blog.csdnimg.cn/20191202131826555.gif#pic_center
[51CTO_Vue.js 2.0_]: https://edu.51cto.com/course/10543.html