Bootstrap
官网地址
https://www.bootcss.com/
https://v4.bootcss.com/ （4版本的官网）
概念
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
一套简单的UI框架
下载方式
一、cdn
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
二、通过npm去下载
npm install bootstrap (这个命令是下载npm上最新的版本)
npm install（i） bootstrap@3 (@3 指定下载3版本)
学员信息表管理小案例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<!--
当页面疯狂刷新，出现闪屏如何解决？
解决方法两种： 一、利用v-text,本身没有 {{}} ， 那么就不会出现相关问题。
二、全局解决刷新闪频问题，指令v-cloak
-->
<div id="app" v-cloak>
<!-- 利用bootstrap创建一个container -->
<div class="container">
<h2 class="text-center text-primary">学员信息输入</h2>
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="email" class="form-control" id="name" aria-describedby="emailHelp"
v-model='userInfo.name'>
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" class="form-control" id="age" v-model='userInfo.age'>
</div>
<div class="form-group">
<label for="tel">手机号</label>
<input type="text" class="form-control" id="tel" v-model='userInfo.tel'>
</div>
<div class="form-group">
<label for="remark">备注信息</label>
<textarea id="reamrk" cols="100" rows="2" v-model='userInfo.remark'></textarea>
</div>
<div class="text-center"><button type="button" class="btn btn-primary" @click='add'>添加</button>
<button type="button" class="btn btn-info" @click='reset'>重置</button></div>
</form>
<h2 class="text-center text-primary">学员信息表</h2>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">序号</th>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">手机号</th>
<th scope="col">备注信息</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for='(item,index) in uInfo'>
<td>{{ index>8 ? index+1 : '0' + (index+1)}} </td>
<td>{{item.name}} </td>
<td>{{item.age}}</td>
<td>{{item.tel}}</td>
<td>{{item.remark}}</td>
<td>
<button type="button" class="btn btn-danger" @click='del(index)'>删除</button>
</td>
</tr>
<tr>
<!-- v-if 和 v-else必须连着使用，否则不生效会报错 -->
<td colspan="6" v-if='!uInfo.length'>暂无数据</td>
<td colspan="6" v-else><button type="button" class="btn btn-danger" @click='delAll'>全部删除</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
userInfo: {
name: '',
age: '',
tel: '',
remark: ''
},
uInfo: localStorage.getItem('uInfo') ? JSON.parse(localStorage.getItem('uInfo')): []
},
methods: {
// 添加
add() {
if(!this.userInfo.name || !this.userInfo.age || !this.userInfo.tel || !this.userInfo.remark){
alert('输入信息不能为空');
return;
};
this.uInfo.push(this.userInfo);
this.reset();
localStorage.setItem('uInfo',JSON.stringify(this.uInfo));
},
// 重置
reset() {
this.userInfo = {
name: '',
age: '',
tel: '',
remark: ''
}
},
// 单删
del(index) {
this.uInfo.splice(index,1);
localStorage.setItem('uInfo',JSON.stringify(this.uInfo));
},
// 全删
delAll(){
this.uInfo = [];
localStorage.setItem('uInfo',JSON.stringify(this.uInfo));
}
}
})
</script>
<!-- 学员信息表思路：
一、利用UI框架搭建静态页
二、把表格的数据转化成假数据,并循环遍历
三、书写逻辑交互
四、刷新页面，数据还在，利用离线存储方法 -->
离线存储
概念：离线存储是H5新增的属性，没有出现这个属性之前，我们的存储用cookie。出现之后大部分的存储都被离线存储所代替
离线存储包含两部分：一、本地存储localStorage 二、会话存储sesssionStorage
记忆要点：
一、localStorage和sesssionStorage
二、localStorage和sesssionStorage以及cookie的区别
三、离线存储中哪一个方法可以实现跨页面存储（就是localStorage）
离线存储两种方法的区别
相同点：都可以缓存内容，大小都是5M左右，存储形式必须是字符串它们的使用语法都一样
存值： localStorage/sesssionStorage.setItem(key,value)
取值： localStorage/sesssionStorage.getItem(key)
删除某一个值： localStorage/sesssionStorage.removeItem(key)
不同点： localStorage它又名永久存储，只要不删除，永远存储，关闭浏览器不消失
sesssionStorage名会话存储，关闭浏览器即消失
表单输入
单选框
<div>
<!-- 单选框一定要写 value,且value是后端要取的数值 -->
性别：
<input type="radio" name='sex' value='0' v-model='regList.sex'> 男
<input type="radio" name='sex' value="1" v-model='regList.sex'> 女
</div>
复选框
<div>
<!--
复选框：定义checkbox初始值，应是一个[] ,获取值的时候，获取的是value 的值
你也可以有默认值：eg:['play']
-->
<input type="checkbox" value='study' v-model='regList.hobby'>学习
<input type="checkbox" value='sleep' v-model='regList.hobby'>睡觉
<input type="checkbox" value='rap' v-model='regList.hobby'>唱歌
<input type="checkbox" value='play' v-model='regList.hobby'>打篮球
</div>
下拉框
<!--下拉框的双向数据绑定，绑定在select标签上。它的value 是option中的value -->
工作种类： <select v-model='regList.address'>
<option value="" disabled>--请选择--</option>
<option value="java">洛阳</option>
<option value="web">郑州</option>
<option value="test">北京</option>
<option value="ui">上海</option>
</select>
一个checkbox
<div>
<!-- 一个checkbox 复选框，我们初始值可以为空，获取value的时候，是true或者false.我们的初始值也可以是true或者false -->
协议：<input type="checkbox" v-model='regList.isGree'>
</div>
动态样式之class
动态class的第一种用法： 设定一个变量 。 例子: :class='变量属性'
动态class的第二种用法: eg: :class="[条件?'成立的类名':'不成立的类名']"
动态class的第三种用法： eg: "{'类名A':条件A,'类名B':条件B,'类名C':条件C,'类名D':条件d}...."
<style>
.blue {
color: blue;
}
.red {
color: red;
}
.green{
color: green;
}
.yellow{
color: yellow;
}
.footer{
width: 100%;
position: fixed;
left: 0;
bottom: 0;
display: flex;
background-color: #ccc;
}
.footer div{
flex: 1;
font: bold 20px/50px '微软雅黑';
}
</style>
<div id="app">
<div>
<!-- 动态class的第一种用法： 设定一个变量 。 eg: :class='变量属性' -->
<p :class="color[0]">{{msg}} </p>
<button @click='changeCol'>点击我更改颜色</button>
<ul>
<!-- 动态class的第二种用法,eg: :class="[条件?'成立的类名':'不成立的类名']" -->
<li v-for='(item,index) in newsList' :class="[index%2 ? color[0]: color[1]]">{{item.title}} </li>
</ul>
</div>
<div class="footer">
<div v-for='(item,index) in navList' :class='[num==index ? "green": "" ]' @click='change(index)'>{{item.name}} </div>
</div>
<!-- 动态class的第三种用法： eg:"{'类名A':条件A,'类名B':条件B,'类名C':条件C,'类名D':条件d}...." -->
<ul>
<li v-for='(item,index) in newsList ' :class="{'red': index===3 ,'blue': index===2,'green': index === 1,'yellow': index===0 } ">{{item.title}} </li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '花自飘零水自流',
color: ['blue', 'red'],
num: 0,
newsList: [
{
title: '向世界顶尖科学家论坛作视频致辞'
},
{
title: '让贫困人口和贫困地区同全国一道进入全面小康社会'
},
{
title: '警方跨国解救7名遭绑架中国人 受害者:狗链锁脖 竹签刺指甲'
},
{
title: '以底线思维强化疫情防控 见证中国小康之大美 海报'
}
],
navList: [
{
name: '首页',
},
{
name: '分类',
},
{
name: '购物车',
},
{
name: '个人中心',
}
]
},
methods: {
changeCol() {
this.color = ['green', 'yellow'];
// console.log(this.color[0]);
},
change(index){
// console.log(index);
this.num = index;
}
}
})
</script>
常用的事件修饰符
.prevent 阻止默认事件
.stop 阻止冒泡事件
.once 只出现一次
.self 只触发自己
.capture 捕获
<div id="app">
<div class="menu" @contextmenu.prevent = 'pre'>
阻止鼠标右键菜单事件即默认事件
</div>
<div class="big" @click='big'>
<div class="small" @click.stop='small'> 阻止冒泡</div>
</div>
<div class="big" @click.once='big'>
<div class="small" @click='small'> once</div>
</div>
<div class="big" @click.self='big'>
<div class="small" @click='small'>self</div>
</div>
<div class="big" @click.capture='big'>
<div class="small" @click='small'>capture</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
pre(){
console.log('阻止了右键菜单');
},
small(){
console.log('我是小盒子');
},
big(){
console.log('我是大盒子');
}
}
})
</script>
常用的键盘修饰符
.enter .13
.shift .16
.ctrl .17
.left .37
.right .39
.up .38
.down .40
.del .46
.space .32
<div id="app">
<input type="text" v-model='msg' @keyup = 'enter1'>
<hr>
<input type="text" @keyup.enter= 'enter2' v-model='msg'>
<input type="text" @keyup.13= 'enter2' v-model='msg'>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:''
},
methods:{
enter1(e){
console.log(e.keyCode);
if(e.keyCode === 13){ // enter键
console.log(this.msg);
}
},
enter2(){
console.log(this.msg);
}
}
})
</script>
浙公网安备 33010602011771号