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

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>内填写

或

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标签中可以

<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的字段

注意，在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...

例如：

window.onload = function ()

{

const controller = new Vue({

el: "div", //选择器

data: {},

methods: {

show: function () {alert('1') }

}

})

}

</script>

...

<!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声明赋值。做出了一个比传统风格好看的界面。

<!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库，于是由再抽象了一层，开发人员分层后，熟悉的是抽象的编程接口。

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

猜你喜欢