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>Documenttitle>
<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>
<div id="app" v-cloak>
<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>
<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>
离线存储
概念：离线存储是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>
性别：
<input type="radio" name='sex' value='0' v-model='regList.sex'> 男
<input type="radio" name='sex' value="1" v-model='regList.sex'> 女
div>
复选框
<div>
<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 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>
协议：<input type="checkbox" v-model='regList.isGree'>
div>
动态样式之class
动态class的第一种用法： 设定一个变量 。 例子: :class='变量属性'
动态class的第二种用法: eg: :class="[条件?'成立的类名':'不成立的类名']"
动态class的第三种用法： eg: "{'类名A':条件A,'类名B':条件B,'类名C':条件C,'类名D':条件d}...."
<div id="app">
<div>
<p :class="color[0]">{{msg}} p>
<button @click='changeCol'>点击我更改颜色button>
<ul>
<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>
<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>
常用的事件修饰符
.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'> oncediv>
div>
<div class="big" @click.self='big'>
<div class="small" @click='small'>selfdiv>
div>
<div class="big" @click.capture='big'>
<div class="small" @click='small'>capturediv>
div>
div>
常用的键盘修饰符
.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>