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>内填写
<!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标签中可以
<!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元素的显示和隐藏
<!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...
例如：
<!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>×</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）用户口令管理
当某个用户不断的尝试密码进行登录数据库是很危险的,因此对密码(口令)的管理十分重要.好在我们可以限制登录次数,超过某些次数的登录将会把用户锁住,隔一段时间才允许其登录,这和你的手机是不是有点一样,你的 ...
随机推荐
- 【函数式编程】reducer为什么叫reducer
最近学习前端的技术,在了解react对DOM的组件抽象,但不提供整体的组件通讯时候,了解了redux,然后就是react-redux: 抽象后,视图完全由对象决定,而用户只能接触视图,所以对象的改变必 ...
- java代码生成Excel文件3000条自定义属性的的域账户名
一个项目为了测试需要模拟3000条域用户,将数据保存在Excel表格,然后导入到与服务器里. 我们今天要做的是自动生成3000条数据,并将这些数据保存在excel表格里面. 需要jar包:poi-3. ...
- match 和 lastIndex 字符串检测差异
match .replace .search 这写不能识别特殊字符 indexOf .indexof 能识别特殊字符 str.lastIndexOf('a') > -1 // 通过lastInd ...
- 常见MQTT服务器搭建与试用
常见MQTT服务器搭建与试用 简介 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是IBM开发的一个即时通讯协议,它比较适合于在低带宽.不可靠 ...
- API网关学习及介绍
一.什么是API网关 API网关是一个服务器,是系统的后端统一入口.首先,它会提供最基本的路由服务,将调用转发到上游服务.其次,作为一个入口,它还可以进行认证,鉴权,限流等操作,对上游服务保护.所以说 ...
- C#基础加强(9)之对象序列化(二进制)
介绍 对象序列化是将对象转换为二进制数据(字节流),反序列化是将二进制数据还原成对象.对象的非持久态的,不仅在程序重启.操作系统重启会造成对象的丢失,就是退出函数范围等都可能造成对象的消失,而序列化与 ...
- 玩转PIL >>> 玩转photo
前:1.使用图片放在文件最后,需要的请自行下载 2.运行环境win10家庭版,已经安装好pillow库 一.学习总结 PIL库支持图像的储存,显示和处理,几乎能处理所有的图片格式,可以完成对图像的缩放 ...
- mac OSx 安装 mysqlclient
首先需要安装 按照提示操作 brew install mysql-connector-c 然后 修改mysql_config 执行mysql_config可以看到文件所在位置 我的目录放在 /usr ...
- 兼容不同浏览器的CSS前缀-webkit-，-ms-，-moz-，-o-
笔者在工作实践中发现当需要CSS兼容不同的浏览器时,需要在CSS样式前加上不同的前缀,从而使其他浏览器也能够达到相同的页面效果. 那么我们怎么去加上这些前缀呢?我们一起带着疑问来进行学习: 1.前缀分 ...
- Extjs6 grid 导出excel功能类，支持renderer
/* grid 导出excel扩展(纯客户端,提交到后台再导的可以自己改改代码也在) 参考自 https://blog.csdn.net/tianxiaode/article/details/4596 ...