vue学习笔记—bootstrap+vue用户管理

时间：2022-01-04 14:50:42

vue，读音view，简单易用的前端框架。特点如下：

1.一个mvvm的前端框架，内部做好了html中dom对象和后台用js语言定义的变量的双向绑定

2.中国人尤雨溪维护的个人项目，中文资料多，和google维护的angular框架相似

.....

bootstrap,一个css库，内部定义了很多样式类型（btn btn-sm btn-danger text-center table....），dom元素中class赋值相应的样式类型，则有相应的风格。比传统的好看。

学习视频：https://pan.baidu.com/s/16WCTG3yY-dIA2YXasw6csA

说明：

a学习的时候vue2.x版本，和视频中的某些功能实现有出入

b IDE后来选择了webstorm，其智能提示目前比vscode做得好一些。

1 初识vue

a.引用库文件 可以引用下载下来的库文件，可以引用url

在<header>内填写

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或
<script src="lib/vue.js"></script>
 
b.在header 的script中创建一个view的实例（controller），该实例内部维护一个json数据data（model），html中的dom声明了v-mode=“xxx”（xxx是data内部的数据名称）（view）。框架实现了mvc模式。
 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

        window.onload = function () {

            const controller = new Vue({

                el: "#app", //选择器

                data: {

                    msg: "hello vue"

                }

            });

        }

    </script>

</head>

<body>

    <div id='app'>

        <h2>{{msg}}</h2>

    </div>

</body>

</html>

上述code的说明：

a.如果把 window.onload里 的function中的vue实例的const去掉，该实例则为全局变量，此时可用浏览器的调试工具（F12）中的控制台，输入controller.msg='nihao',html中对应刷新nihao

b.vue中的el表示element，表示选择器，可以填写id，例如#app；可以填写class   ;可以填写 html中元素类别名称，例如div。但是选择器对应的标识不能对应html和body，会出错。

c html中引用{{xxxx}} xxxx是data中定义的字段，这种写法引用变量的内容

vue实例中的data是一个json的变量，里面可以定义不同类型的字段，支持bool，double，array，json，string...

例如：

data:{msg:"hello vue",
msg2:12,
msg3:true,
arr:['apple','orange','banana'],
json:{a:'apple',b:'orange',c:'banana'}
}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

   <script>

window.onload=function(){

    const controller = new Vue

      ({

          el:"div",//选择器

          data:{msg:"hello vue",

          msg2:12,

          msg3:true,

          arr:['apple','orange','banana'],

          json:{a:'apple',b:'orange',c:'banana'}

          }

      });

      };

    </script>

</head>

<body>

    <div>

            <!-- 双向数据绑定 -->

       <input type="text" v-model='msg'>

       <br>

       <input type="text" v-model='msg'>

       <br>

       {{msg2}}

       <br>

       {{msg3}}

       <br>

       {{arr}}

       <br>

       {{json}}

    </div>

</body>

</html>

　　

2.v-for

用于结合html中的ul，ol，table循环迭代data中集合元素的语法

例如在ul标签中可以

<ul v-for="(v,index) in arr">           
<li> {{v}} {{index}}</li>
</ul>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

        window.onload = function () {

            const controller = new Vue({

                el: "div", //选择器

                data: {

                    arr: ['apple', 'orange', 'banana'],

                    json: {

                    a: 'apple',

                    b: 'orange',

                    c: 'banana'

                }

                }

            });

        };

    </script>

</head>

<body>

    <div>

        <ul v-for="(v,index) in arr">

            <li> {{v}} {{index}}</li>

        </ul>

        <hr>

        <!-- value,key,index顺序莫颠倒 -->

        <ul v-for='(value,key,index) in json'>

            <li>

              value:{{value}} key:{{key}} index {{index}}

            </li>

        </ul>

        <hr>

    </div>

</body>

</html>

上述代码中：

v-for后跟字符串，由于是弱类型，解析型的语言，新手容易出错。

不需要index信息则 v-for=‘value in arry’则可，需要index信息则v-for='(v,index) in arr' 其中v,index 为自定义名，视频教学中说不这样写可以写$index,实际上不行，可能是版本不同的问题。

3.v-mode

指定html中的元素绑定到vue实例中的data的变量上，可以多个html元素绑定到同一份的实例数据，例如2个html textbox同步内容。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

   <script>

window.onload=function(){

    const controller = new Vue

      ({

          el:".box",//选择器

          data:{msg:"hello vue",

          foods:['apple','orange','banana']}

      });

      };

    </script>

</head>

<body>

    <div class='box'>

            <!-- 双向数据绑定 -->

       <input type="text" v-model='msg'>

       <br>

       <input type="text" v-model='msg'>

    </div>   

</body>

</html>

4.v-show

用于控制html元素的显示和隐藏

v-show="show" //show是vue中data里一个定义为bool的字段
<div style="width:100px;height:100px;background:red" v-show="show"></div>
 
注意，在v-show后赋值内容引用data不需要{{}}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

        window.onload = function () {

                const controller = new Vue({

                        el: "div", //选择器

                        data: {

                          show:true

                        },

                        methods: {

                            hide: function () {

                             this. arr.push ('tomato')               

                            }

                        }

                        })

                }

    </script>

</head>

<body>

    <div>

        <input type="button" value="clickme" v-on:click="show = false">

        <div style="width:100px;height:100px;background:red" v-show="show"></div>

    </div>

</body>

</html>

5.事件v-on

html元素中使用 v-on:事件名="方法名"   为html事件注册事件响应方法

方法定义在vue实例中的json的methods的字段内，该methods字段也是一个json，内部可以定义多个方法。

事件名可以是click    mouseover       mouseleave      dblclick...

例如：

<script>
window.onload = function ()     
{
   const controller = new Vue({
         el: "div", //选择器
         data: {},
         methods: {
               show: function () {alert('1') }
                         }
                                              })
}
</script>
...
<input type="button" value="clickme" v-on:click="show()">
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

        window.onload = function () {

                const controller = new Vue({

                        el: "div", //选择器

                        data: {

                            arr: ['apple', 'orange', 'banana'],

                            json: {

                                a: 'apple',

                                b: 'orange',

                                c: 'banana'

                            }

                        },

                        methods: {

                            add: function () {

                             this. arr.push ('tomato')               

                            }

                        }

                        })

                }

    </script>

</head>

<body>

    <div>

        <input type="button" value="clickme" v-on:click="add()">

        <br>

        <ul v-for='value in arr'>

            <li>{{value}}</li>

        </ul>

   <hr>

   <ul>

       <li>a</li>

       <li>b</li>

   </ul>

    </div>

</body>

</html>
 

6.用户管理

使用了bootstrap和vue实现了用户管理功能，可以新增，删除用户；

bootstrap用于优化美化布局  对html元素使用class声明赋值。做出了一个比传统风格好看的界面。

vue学习笔记—bootstrap+vue用户管理

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="lib/bootstrap.min.css">

    <script src="lib/jquery-3.3.1.min.js"></script>

    <script src="lib/bootstrap.js"></script>

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

    <script>

        window.onload=function () {

            const control = new Vue({

                el:"#app",

                data:{

                    msg1:'hello',

                    myData:[{name:"jay",age:'18'},

                        {name:"spring",age:'16'}

                    ],

                    username:'',

                    age:'',

                    nowIndex:-1

                },

                methods:{

                    add:function () {this.myData.push({name:this.username,age:this.age});

                        this.reset()

                    },

                    reset:function(){this.username='';this.age='';},

                    deleteData:function(n) {

                        if(n==-2)

                            this.myData=[];

                        else

                            this.myData.splice(n,1);

                    }

                }

            })

        }

    </script>

</head>

<body>

<div id="app" class="container">

    <form role="form">

        <div class="form-group">

            <label for="username">用户名:</label>

            <input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">

        </div>

        <div class="form-group">

            <label for="age">年龄:</label>

            <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age">

        </div>

        <div class="form-group">

            <input type="button" value="添加" class="btn-primary" v-on:click="add">

            <input type="reset" value="重置" class="btn-danger"  >

        </div>

    </form>

    <hr>

    <table class="table table-bordered table-hover">

        <caption style="caption-side:top" class="h2 text-info text-center">用户信息表</caption>

        <tr class="text-center text-danger">

            <th>序号</th>

            <th>名字</th>

            <th>年龄</th>

            <th>操作</th>

        </tr>

        <tr class="text-center" v-for="(item,index) in myData">

            <td>{{index+1}}</td>

            <td>{{item.name}}</td>

            <td>{{item.age}}</td>

            <td>

                <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index">删除</button>

            </td>

        </tr>

        <tr v-show="myData.length!=0">

            <td colspan="4" class="text-right">

                <button class="btn btn-danger btn-sm"data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">删除全部</button>

            </td>

        </tr>

        <tr v-show="myData.length==0">

            <td colspan="4" class="text-center text-muted">

                <p>暂无数据...</p>

            </td>

        </tr>

    </table>

    <div role="dialog" class = "modal fade" id="layer">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <h4 class="modal-title">确认删除么?</h4>

                    <button class="close"  data-dismiss="modal">

                        <span>&times;</span></button>

                </div>

                <div class="modal-body text-right">

                    <button class="btn btn-sm btn-primary" data-dismiss="modal">取消</button>

                    <button class="btn btn-sm btn-danger" data-dismiss="modal" v-on:click="deleteData(nowIndex)">确认</button>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

其中"data-toggle="modal" 表示使用模态窗口

data-target="#layer" 表示引用具体模态窗口的id
 data-dismiss="modal"表示关闭模态窗口

一点感受：
   界面目前的编程实现风格是声明出来，然后由浏览器帮忙画。但是由于html松散零碎，于是有很多不同的ui库，于是由再抽象了一层，开发人员分层后，熟悉的是抽象的编程接口。

相关文章