VUE+Boostrap实现简单的用户添加和删除

1.导入所需的库

     css需要bootstrap.css

     js需要jquery.js，bootstrap.js，vue.js

  （直接使用下载好的就行，不需要使用npm等进行下载）

2.使用boostrap实现界面

    实现效果如下

    

    代码实现如下：

    
添加用户
    

        

            姓名：
            

                
            
        

        

            年龄：
            

                
            
        

        

            邮箱：
            

                
            
        
        

            
            
        

    
    

    

        
目录列表
        

        

            
序号
            
姓名
            
年龄
            
邮箱
            
操作
        
        
        

        

            
{{index}}
            
{{user.name}}
            
{{user.age}}
            
{{user.email}}
            

                删除
            
        
        

            

                删除所有
            
        
        
    



    
    

        

            

                

                    
                    ×
                    
确认要删除用户{{users[nowIndex]?users[nowIndex].name:''}}吗？
                    
确认要删除所有用户吗？
                
                

                    取消
                    确认
                
            
        
    

    代码需要关注的地方：

1. bootstrap中的栅栏布局class="container"；
2. 可以使用bootstrap中的class="text-center （text-right）"实现容器内的内容居中；
3. 使用表单的时候：①首先使用
   标签将所有表单内容包含起来，添加bootstrap类role="form"和class="form-horizontal"实现水平居中，也可以参考bootstrap文档实现垂直等效果；②每一个表单组用div表示，添加类class="form-group",里面可以放或者标签，为了布局方面，可以把input等元素放在一个div里，可以使用boostrap栅栏布局，栅栏布局col相加不大于12，可以使用col-sm-off-set-num，进行偏移，实现居中效果，label和input标签class="label-control"和class="form-control",input可以添加placeholder添加默认内容；③input type设置为button,可以添加bootstrap样式class="btn btn-fault(primary,danger,warning)  btn-sm value添加button里的内容，需要强调将inpue设置为type="reset"可以将form标签里的所有内容清空。
4. 水平分割线可以用

   ---

5. 表格元素的使用：①结构table下有caption thead tbody，thead下面有tr ,tr里面有th,tbody里面tr，tr有td；②为table设置bootstrap属性，可以有实线，虚线，鼠标悬停效果；③caption是文本，可以为文本添加boostrap效果；④表格里的数据由VUE实例里的数据加载出来；
6. ①bootstrap里的模态框，有三层modal__modal-dialog__modal-content，modal-content里面有三层，modal-header modal-body,modal-footer;②header设置关闭按钮参考×和提示内容class="modal-title";③开启模态框，在需要点击的按钮上设置data-toggle="modal"和data-target="#del";关闭模态框，在模态框中的按钮设置data-dismiss=“modal”,需要强调的是，可以为按钮同时设置data-dismiss和click事件；

3.添加VUE实例

代码需要关注的地方

1.  windoe.οnlοad=function(){}页面加载完执行；
2. new一个vue实例，有el,data,methods等内容；
3. 添加用户时，用户的姓名，年龄，邮件和VUE中的数据相关联，也就是相互绑定需要v-modal，绑定的是usr.name,所以需要在data里设置这样user对象；添加用户按钮设置v-onclick:"xxx"事件，简写@:click="xxx";添加用户动作使用push,添加完成后清空user对象。
4. 表格数据在tr就是行上使用v-for指令，然后在td里使用{{}}语法展示数据；
5. 区分删除那一行还是删除所有。可以使用数组的index属性来区分，index最小是0，可以用变量currentIndex区分，如果是删除所有，就设置为-1.删除当前用户，则设置为当前index值，这样在弹出模态框的同时，currentIndex的值就发生了变化。   然后可以在模态框中点击确认进行动作的执行，动作执行写一个函数，先判断currentIndex的值，如果是-1，删除所有，如果不是，就删除当前值。删除所有直接赋值空数组，删除固定下标的值，使用splice。
6. 注意this的使用。