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）用户口令管理
当某个用户不断的尝试密码进行登录数据库是很危险的,因此对密码(口令)的管理十分重要.好在我们可以限制登录次数,超过某些次数的登录将会把用户锁住,隔一段时间才允许其登录,这和你的手机是不是有点一样,你的 ...

随机推荐

js 设计模式之观察者模式
观察者模式又被称为“发布-订阅”模式,目的是解决主题对象和观察者之间功能的耦合性.发布者和订阅者之间是互不干扰的,没有联系的,通过观察者,当做中介,将二者联系起来. 例子:以学生和老师之间的为例 1 ...
js根据服务端返回的时间倒计时
使用服务端与本地的时间差进行计算 $(function(){ // 倒计时 var _ordertimer = null; var data =new Date(); var txt = $('.js ...
Python自学知识点----Day03
cd指令说明 1).作用:切换工作目录. 2). 命令(注意空格) 含义 cd ~===cd 回到家目录 cd . ...
LeetCode 33 - 搜索旋转排序数组 - [二分]
假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标值,如果数组中存在这个目标值, ...
NTFS文件系统详细分析
NTFS文件系统详细分析第一部分什么是NTFS文件系统想要了解NTFS,我们首先应该认识一下FAT.FAT(File Allocation Table)是“文件分配表”的意思.对我们来说 ...
js取整数、取余数
js取整数.取余数取整 1.取整 // 丢弃小数部分,保留整数部分 parseInt(5/2) // 2 2.向上取整 // 向上取整,有小数就整数部分加1 Math.ceil(5/2) // 3 ...
mysql技巧
SELECT id,is_deleted,position,1/position as p,status FROM application.view_entry order by p desc;.// ...
Mac苹果电脑没有声音怎么办
有时候 Mac 从睡眠状态恢复之后没有声音,这是 Mac OS X 系统的一个 Bug.这是因为 Mac OS X 的核心音频守护进程「coreaudiod」出了问题,虽然简单的重启电脑就能解决,但是 ...
eclemma怎么安装 eclemma的安装与简单使用图文教程(附下载)
来自于:https://www.jb51.net/softjc/628026.html 一. 安装有两种安装方法 1. 下载安装(推荐) 地址: http://sourceforge.net/pro ...
datetime模块处理时间
python常用的处理时间的库有:datetime,time,calendar.datetime库包括了date(储存日期:(年.月.日),time(储存时间:(小时.分.秒和微秒),timedelt ...

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

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

随机推荐

热门专题