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用户管理的更多相关文章

vue学习笔记：vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
【Vue学习笔记】—— vue的基础语法 { }
学习笔记作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
oracle学习笔记一：用户管理（1）简单的命令
1,打开操作界面我们在安装好oracle后可以在两个地方打开要操作的界面.请看图一: 或者在运行窗口输入sqlplus.其实这里也是调用了bin下面的sqlplus.exe. 在打开dos命令行窗口 ...
vue学习笔记(二)vue的生命周期和钩子函数
前言通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
Vue学习笔记之Vue知识点补充
0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...
Vue学习笔记之Vue的使用
0x00 安装对于新手来说,强烈建议大家使用<script>引入 0x01 引入vue.js文件我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. ...
Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
oracle学习笔记一：用户管理（3）用户口令管理
当某个用户不断的尝试密码进行登录数据库是很危险的,因此对密码(口令)的管理十分重要.好在我们可以限制登录次数,超过某些次数的登录将会把用户锁住,隔一段时间才允许其登录,这和你的手机是不是有点一样,你的 ...

随机推荐

mac charles抓安卓（小米）http包
网上有很多的教程说明如何操作,都写的很好,比如 https://blog.csdn.net/luochoudan/article/details/72801573,我在这里补充一点,非常重要的一点:手 ...
剑指offer——python【第59题】按之子形顺序打印二叉树
题目描述请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. 解题思路这道题其实是分层打印二叉树的进阶版 ...
kafka创建topics 错误: 找不到或无法加载主类 Files\Java\jdk1.7.0_80\lib;C:\Program
解决方案如下: 在kafka安装目录中找到bin\windows目录中的kafka-run-class.bat找到%CLASSPATH%为其加上双引号
扫毒>>观后感
观后感中学时期,甚至在小学时期,那个很懵懂的年龄, 看了什么电影,去了哪里,都要写观后感. 那个时候觉得观后感很玄学,为啥看的电影都一样,去的地方都一样, 为啥人家的观后感貌似说的真的有那么点道理, ...
C#获取项目程序及运行路径的方
1.asp.net webform用“Request.PhysicalApplicationPath获取站点所在虚拟目录的物理路径,最后包含“\”: 2.c# winform用 A:“Applic ...
csv impor export with mysql
server-side:SELECT id,tutorialId,tutorialName,ucreatelink,structureVersion FROM base_courseINTO OUTF ...
Confluo: Distributed Monitoring and Diagnosis Stack for High-speed Networks
https://rise.cs.berkeley.edu/blog/confluo-millisecond-level-queries-on-large-scale-streaming-data/ht ...
Linux（CentOs 7）系统重装笔记(二)---完全删除用户账号和root用户登录
参考网址:https://jingyan.baidu.com/article/046a7b3ede1c38f9c27fa91b.html 一.完全删除用户 1.查看要删除的用户账号信息 find / ...
美团笔试（web前端)
分为3部分: 1.逻辑推理.行测.找规律: 2.html css javascript的简单的选择题,以及数据结构,操作系统方面的知识: 3.两道编程题,第一道题关于竞赛报名,有限制的分组,输入N和M ...
ytkah常用网址导航关于网站运营等
关于运营的网站人人都是产品经理产品100 爱运营 A5网站运营姑婆那些事儿馒头商学院运营者 91运营网互联网的一些事 jb51网站运营三联网站运营从零开始做运营科技/互联网 cn ...

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

vue学习笔记—bootstrap+vue用户管理的更多相关文章

随机推荐

热门专题