HTML
行内元素块级元素空元素
行内元素：span img input...
块级元素: div footer header section p h1...h6 ...
空元素：br hr ...
元素之间的转换
<html>
<head>
<style>
div{
display:inline; //转换为行内元素 不独占一行，且不能设置宽高的
display:inline-block;//转换为行内块级元素 不独占一行 ，可以设置宽高
display:block;//转换为块级元素 独占一行，可以设置宽高
}
</style>
</head>
</html>
link和@import区别
区别一：link先有，后有@import （兼容性link比@import兼容）
区别二：加载顺序，浏览器先加载标签link后加载@import
<html>
<head>
<link>
<style>
@import "a.css";
</style>
</head>
</html>
标签之间的区别
title和h1的区别：
定义：
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1：文章主题内容，告诉搜索引擎我们网页内容最主要是什么
区别：
title是显示在网页的标题上，h1是显示在网页内容上
title比h1添加的重要对于seo的了解 （网站的logo都是用h1包裹的）
b与strong的区别：
定义：
b：实体标签，用来给文字加粗的
strong：逻辑标签，用来加强字符语气
区别：b标签只有加粗的样式，没有实际含义
strong表示标签内字符比较重要，用以强调
i与em的区别：
定义：
i：是一个实体标签，用来做文字倾斜的
em：是逻辑标签，用来强调文字内容的
区别：
i只是一个倾斜标签，没有实体含义 （i大多数用于字体图标上）
em表示标签内字符重要，用于强调 （em则用于专业术语上如医药、生物）
img中title和alt区别：
定义：
title：鼠标移入到图片显示的值
alt：图片无法加载显示的值
区别：
在seo的层面上，搜索引擎抓取不到图片的，所以前端在写img标签的时候，为了增加seo的效果，增强alt属性来描述图片的主题内容。
png、jpg、git这些图片格式什么时候用
定义：
png：无损压缩，尺寸体积要比jpg/jpen的大，适合做小图标
jpg：采用压缩算法，有一点失帧，比png体积小（用于中大型图片）
git：一般做动图的
webp：同时支持有损或无损压缩，相同质量的图片，webp具有更小的体积，兼容性不好
<html>
<head>
<style></style>
</head>
<body>
<img title="这是一张图片" alt="这是alt">
</body>
</html>
CSS
CSS盒子模型
css盒子模型有：标准盒子模型、IE盒子模型
css的盒子模型区别：
标准盒子模型：margin、border、padding、content
IE盒子模型：margin、content（border+padding+content）
如何转换盒子模型：
通过css来进行转盒子模型
*{
box-sizing:border-box;//IE盒子模型
box-sizing:content-box;//标准盒子模型
}
line-height和height的区别
line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）
height是一个死值，就是这个盒子的高度
CSS选择器
CSS选择符：
通配（*）
id选择器（#）
类选择器（.）
标签选择器（div、p、sapn...）
相邻选择器（+ 下一个兄弟）
后代选择器（ul li）选中ul的所有li元素
子元素选择器（>）
属性选择器（div[background:red]）
*{
ul li + li{//这是排除第一个li元素，选择剩下的所有li元素
background:red;
}
}
CSS属性继承
文字系列：font-size、color、line-height、text-aling...
不可继承属性：border、padding、margin...
CSS优先级算法如何计算
优先级比较：@important>内联样式>id>class>标签>通配
CSS权重计算：
第一：内联样式style 权重值：1000
第二：id选择器 权重值：100
第三：类选择器 权重值：10
第四：标签&伪元素 权重值：1
第五：统配、>、+ 权重值：0
CSS画个三角形
用border来画
transparent :颜色透明
div{
width:0;
height:0;
border-left:100px solid #ccc;
border-right:100px solid transparent;
border-top:100px solid transparent;
border-bottom:100px solid transparent;
}
三角形在那哪个方向哪个方向就不透明
transform:rotate(180deg);//方向旋转
盒子垂直居中
<div class="container">
<div class="main"></div>
</div>
第一种方法：flex布局来实现
.container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height:300px;
border: 1px solid black;
}
.main{
background: red;
}
第二种方法：
.container{
position: relative;
width: 300px;
height:300px;
border: 1px solid black;
}
.main{
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
display有哪些值
none：隐藏元素
block:将元素转换为块元素
inline：将元素转换为内联元素
inline-block：建元素转换为行内块级元素
table：将元素用表格的形式来显示
BFC规范
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响外面的元素
1.BFC：就是块级格式化上下文
2.BFC原则：如果一个元素具有BFC，那么内部元素在怎么弄，都不会影响外面的元素。
3.如何触发BFC：
float的值为非none
overflow的值为非visible
display的值为：inline-block、table-cell...
position的值为：absoute，fixed
清除浮动的方式
1.触发BFC来请除浮动（overflow:hidden）
2.多创建一个盒子，添加样式：clear:both;
3.通过伪元素来实现：after
div:after{
content:"";
display:block;
clear:both;
}
CSS定位
通过position属性来定位
static：没有定位
fixed：固定定位，相对于浏览器窗口进行定位
relative：相对于自身定位，不脱离文档流
absolute：相对于第一个有relative的父元素定位，脱离文档流
relative和absolute区别
1.relative不脱离文档流 ，absolute脱离文档流
2.relative相对于自身定位，absolute相对于第一个有relative的父元素
3.relative如果有left、right、top、bottom只有left、top存在
absolute如果有left、right、top、bottom都可以存在
双飞翼布局
定义：左右
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
.container{
width:100vw;
height:100vh;
}
.container>div{
float:left;
}
.left{
margin-left:-100%;
width:200px;
height:100vh;
background:red;
}
.conter{
width:100%;
background:pink;
}
.right{
margin-left:-200px;
width:200px;
height:100vh;
background:blue;
}
</style>
</head>
<body>
<div class="container">
<div class="conter"> conter</div>
<div class="left"> left</div>
<div class="right"> right</div>
</div>
</body>
</html>
CSS reset
reset.css 是一个css文件，用来重置css样式
Normalize.css 为了增强跨浏览器渲染的一致性，重置css样式
CSS sprite
1.是什么
把多个小图标合并成一个大图片
2.优缺点
优点：减少了http请求的次数，提升了性能；
缺点：维护比较差（例如图片位置进行修改或者宽高进行修改）
display:none and visibility:hidden
display:none:是不占用位置的/
visibility：hidden ；虽然隐藏了但是占用位置
opacity和rgba
共同性：实现透明效果
1.opacity 取值范围是0到1之间，0表示完全透明，1表示不透明
2.rgba r代表红色，g表示绿色，b表示蓝色，a也是0-1之间
区别：opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明的属性
JavaScript
JS延迟加载
async defer
<script async type="" src="1.js"></script>
<script defer type="" src="1.js"></script>
defer:等html全部解析完成，才会加载js代码，顺序执行js脚本。
async：async是和html解析同步完成的，不是顺序执行js脚本，谁先加载完成谁先执行。
JS数据类型
基本类型：String、number、boolean、undefined、null、symbol、bigint
引用类型：object （array function object）
NaN 是一个数值类型 具体不知道 如 undefined+1 就是 NaN
null和undefined的区别
1.作者在设计js的时候先设计了null（最初设计js的时候借鉴了java）
2.null会被隐试转换为0，很不容易发现错误
3.先有null后有undefined。出来undefined是为了填补之前的错误
console.log(null==undefined) //true
console.log(null==0) //false
console.log(0==undefined) //false
具体的区别：javascript的最初版本是这样区分的：null是一个表示“无”的对象（空对象指针），转为数值为0，undefined是一个表示“无”的原始值，转换为数值是NaN。
==和===区别
==：比较的是值
string==number||boolean||number||...都会隐式转换
通过valueOf转换（valueOf()方法通常由JavaScript在后台自动调用）
===：比较的是值和类型
JS微任务和宏任务
1.js是单线程的语言。
2.js代码执行流程：同步任务执行完==》事件循环
事件循环（微任务、宏任务）
同步的任务都执行完了，才会执行事件循环里面，进入事件循环：请求、定时器、事件...
微任务：promise.then
宏任务：setTimeout..
要执行宏任务的前提是清空了微任务。
setTimeout(function(){
console.log(5)
},1000)
new Promose((reslove)=>{
console.log(2)
reslove()
}).then(()=>{
console.log(3)
}).then(()=>{
console.log(4)
})
console.log(1);
打印结果是：2 1 3 4 5
JS作用域
1.除了函数外，js是没有块级作用域
2.作用域链：内部可以访问外部的变量，外部不可以访问内部的变量。
变量优先访问内部变量，内部没有在向外找。
3.注意声明变量是var还是没有写如（b=0 =》window.b=0）
4.js有变量提升的机制（变量悬挂声明）
5.优先级：声明变量》声明普通函数》参数》变量提升
function fun(a){
var a=10;
function a(){}
console.log(a); //打印的值是 10
}
function c(){
var b = 1;
function a(){
console.log(b);
var b= 2;
console.log(b);
}
a();
console.log(b);
}
c();
执行结果：undefined 2 1
随机数
//生成n位数字字符串
function randomNum(n){
let res = ''
for(let i=0;i<n;i++){
res += Math.floor(Math.random()*10);
}
return res;
}
//生成n位数字字母混合得字符串
function generateMixed(n){
let chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
let res = '';
for(let i=0;i<n;i++){
let id = Math.floor(Math.random()*36);
res += chars[id]
}
return res;
}
闭包
闭包：本质就是上级作用域内变量的生命周期，因为被下级作用域内引用，而没有被释放。就导致上级作用域内的变量，等到下级作用域执行完以后才正常得到释放。
优点：
可以访问外部函数的局部变量
缺点：
变量会驻留内存中，造成内存损耗问题
内存泄漏【ie】
function fun(){
let a =10;
return function(){
console.log(a)
}
}
fun()();
原型链+this指向
function Foo(){
getName = function(){console.log(1)}//注意是全局 window.
return this;//this是指向window
}
Foo.getName = function(){console.log(2)}
Foo.prototype.getName = function(){console,log(3)}
var getName = function(){console,log(4)}
function getName(){
console.log(5)
}
Foo.getName(); //2
getName(); //4
Foo().getName();//1
//这里调用了顶掉了var getName 。。。
//getName = function(){console.log(1)}//注意是全局 window.
getName();//1
new Foo().getName();//3
-------------------------------------------------
var o ={
a:10,
b:{
fn:function(){
console.log(this.a);//undefine
console.log(this)//指向b
}
}
}
o.b.fn();
JS判断是不是数组
let a= [1,2,3]
let b= "124"
1.通过 isArray 来判断
console.log(Array.isArray(a)) //true
console.log(Array.isArray(b)) //false
2.通过 instanceof
console.log(a instanceof Array) //true
3.通过原型
console.log(Object.prototype.toString.call(a).indexOf('Array')>-1)//true
4.isPrototypeof
console.log(Array.prototype.isPrototypeof(a))//true
5.constructor
console.log(a.constructor.toString().indexOf('Array')>-1)//true
slice是干嘛的，splice会不会改变原数组
1.slice 是用来截取数组的但是不会改变原数组
const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
arr.slice(); // 无参数时，截取所有的元素。
arr.slice(2); // 从第二个值开始提取，直到末尾
arr.slice(-2); // 提取最后两个元素 负数会将其与长度相加，-2+6=4
arr.slice(2, 4); // 提取从第二个到第四个之间的元素（不包括第四个元素）
arr.slice(4, 2); // 空
2.splice:功能有：插入、删除、替换 （会改变原数组）
返回删除的数组
var arr1 = ['a', 'b', 'c', 'd', 'e', 'f'];
arr1.splice(1); //从第index为1的位置开始，删除元素
arr2.splice(-2); //删除最后两个元素，和slice同样的思想。
arr3.splice(1, 3); //从第index为1的位置开始删除元素,一共删除三个元素
// 增加系列
arr4.splice(1,0,'g','h') //纯增加情况
//变更的情况就是 先删除再增加，即替换
arr4.splice(1, 3, 'js', 'vue');//删除+增加 == 更改
数组去重
var arr = [1,1,2,2,3,3]
1.new Set()
console.log(Array.from(new Set(arr)))
console.log([new Set(arr)])
2.indexOf
function unqiue(arr){
var array=[];
for(let i =0;i<arr.length;i++){
if(array.indexOf(arr[i])==-1){
array.push(arr[i])
}
}
return array;
}
多维数组找最大值
let arr =[
[3,2,5,2],
[36,5,3,0],
[36,58,2]
]
function funAarry(arr){
var ar = [];
arr.forEach((item,index)=>{
ar.push(Math.max(...item))
})
return ar;
}
给字符串新增方法
String.prototype.addPrefix = function(str){
return str+this
}
console.log("world".addPrefix('hello'))//helloworld
找出字符串出现最多次数字符
let str = 'aabbccddsssssaaassss'
var obj = {};
for(let i =0;i<str.length;i++){
let char = str.charAt(i);//charAt方法可返回指定位置的字符。
if(obj[char]){
obj[char]++;
}else{
obj[char]=1;
}
}
var max =0;
for(let key in obj){
if(max<obj[key]){
max = obj[key]
}
}
for(let key in obj){
if(obj[key]==max){
console.log("出现最多的字符是"+key)
console.log("出现的次数是"+max)
}
}
节流和防抖
1.防抖
var timer =null;
dom.addEventListen("click",function(e){
if(timer!=null){
clearTimouter(timer);
}
timer = setTimeout(() => {
console.log("active");
},100)
}
})
2.节流
let c=true;
dom.addEventListen("click",function(e){
if(!c){
return
}
setTimouter(()=>{
console.log("active");
c=false
},1000)
}）
new操作符具体做了什么
1.创建了一个空的对象
2.将空对象的原型，指向于构造函数的原型
3.将空对象作为构造函数的上下文（改变this的指向）
4.对构造函数有返回值的处理判断
function create(fn,...args){
//创建一个空对象
let obj={}
//将空对象的原型，指向于构造函数的原型
Object.setPrototypeOf(obj,fn.prototype)
//将空对象作为构造函数的上下文 改变this指向
let result = fn.apply(obj,args);
//对构造函数有值返回处理判断
return result instanceof Obejct ? result :obj;
}
原型链
1.原型可以解决什么问题
对象属性共享和共享方法
2.谁有原型
函数有：prototype
对象拥有：_proto_
3.对象查找属性或者方法的顺序
先在对象本身找-》构造函数中找=》对象的原型=》构造函数的原型中=》当前原型的原型中查找
4.原型链
就是把原型串联起来，原型链的最顶端是null
继承
1.ES6继承
class Parent{
constructor(){
this.age=18;
}
}
class Child extends Parent{
constructor(){
super();//继承要添加这不然会报错
this.name="kun"
}
}
let k = new Child()
console.log(k,k.name,k.age)
2.原型链继承
function Parent(){
this.age =20
}
function Child(){
this.name="kun"
}
Child.prototype = new Parent();
let k = new Child();
console.log(k,k.name,k.age)
3.借用构造函数
function Parent(){
this.age =20
}
function Child(){
this.name="kun"
Parent.call(this)
}
let k = new Child();
console.log(k,k.name,k.age)
call、apply、bind区别
共同的：功能一样 改变函数体内this指向
语法：函数.call()、函数.apply、函数.bing()
区别：
1.call、apply会立即执行，bing返回的是一个函数需要加（）来执行
2.参数不同：apply第二个参数是数组，call和bing有多个参数需要挨个写 （fn.call(obj,1,2) fn.apply(obj,[1,2])）
场景：
1.let arr =[1,2,3,500,56,5]
console.log(Math.max.apply(null,arr))
2.
sort
定义:针对于数组的元素进行排序，并返回数组，默认排序是根据字符串unicode码点
let arr = [12,2,'13',11,111,24]
let arr1 = arr.sort(function(a,b){
return a-b;//数组从小到大排序
return b-a;//数组从大到小排序
})
let arr = [
{name:123,age:1},
{name:321,age:3},
{name:153,age:2},
]
function compare(age){
return function(a,b){
let v1 =a[age]
let v2 = b[age]
return v1-v2
}
}
let k2 =arr.sort(compare('age')) //对其从大到小排序
深拷贝和浅拷贝
共同点：复制
1.浅拷贝：只复制引用，而未复制真正的值 （共用同一个地址）
//浅拷贝
let arr1=[1,2,3,5,4,6,5]
let arr2= arr1;
console.log(arr1,arr2)
arr1[0]=0;
arr2[1]=0;
console.log(arr1,arr2)
一个数组发生改变，则另一个数组也会发生改变
let obj1={a:1,b:2}
let obj2= Object.assign(obj1)
2.深拷贝：是复制真正的值 互不干扰
let obj1 ={
a:1,
n:2
}
let obj2 = JSON.parse(JSON.stringify(obj1))
JSON.parse(JSON.stringify(obj))深拷贝的问题
1、如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后，时间对象变成了字符串。
2、如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象。
3、如果obj里有函数，undefined，则序列化的结果会把函数， undefined丢失。
4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null。
5、JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor。
6、如果对象中存在循环引用的情况也无法正确实现深拷贝。
3.递归实现深拷贝：
function copyObj(obj){
if(Array.isArray(obj)){
let newObj=[]
}else{
let newObj={}
}
for(let key in obj){
if(typeof obj[key]=="object"){
newObj[key]=copyObj(obj[key])
}else{
newObj[key] = obj[key]
}
}
return newObj;
}
localStorage、sessionStorage、Cookie
localStorage.setItem("kun",123);
sessionStorage.setItem("kun",123);
let date = new Date();
let time = 1000*60*60*24;
time = date.getTime()+time
document.cookie='name=kun;expires='+date.toUTCString()+"" //expires是设置过期时间
共同点：在客户端存放数据
区别：
1.数据存放有效期
sessionStorage:浏览器当前窗口有效，关闭当前页面就失去数据
localStorage:一直保存在浏览器中，不会因为页面关闭而失去数据，也叫持久化存储
cookie：只在设置的cookie过期时间之前有效。即使浏览器窗口关闭也有效
2.sessionStorage、localStorage 不可以设置过期时间
3.存储大小的限制：
cookie存储不能超过4k
sessionStorage、localStorage不能超过5M
浏览器的不同也会有一些变化
H5/C3面试题
什么是语义化标签
::before和:after中双冒号和单冒号的区别
伪类
伪类是添加到选择器的关键字，用于指定所选元素的特殊状态，修改特殊状态下的样式。
这是MDN文档对伪类的定义。
比如设置鼠标悬浮在按钮元素上时，设置背景色为红底白字。
button:hover{
background:red;
color:white
}
伪元素
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
如何关闭IOS键盘首字母自动大写
在input的输入筐添加属性
怎么让Chrome支持小于12px文字
Chrome的默认字体大小是16px 每个浏览器的字体大小都不一样
可以通过css3 缩放来实现
div span{
display:inline-block;
-webkit--transform:scale(0.8)
}
rem和em区别
IOS系统中元素被触摸时产生的半透明灰色遮罩去除
通过css
表单输入框placeholder的颜色修改
禁止ios长按触发系统的菜单，禁止长按下载图片
禁止用户选中文字
自适应
rem只是一个单位不属于自适应的核心
单纯的使用rem是没有用的
自适应最终就是改变html的font-size来使得页面自适应
方案：
1.淘宝无限适配【移动端】：淘宝无限适配+布局单位使用rem
function flexible(){
window.onresize=function(){ //监听页面放大缩小
///获取当前可视页面的宽度
let doc = document.documentElement;
let w= doucument.documentElement.clientWidth/10
doc.style.fontSize = w+"px";
}
}
响应式
1.是什么
一个URL可以响应多端
通过媒体查询来调整页面的内容和一些布局
@media only screen and (max-width:1000px){ //大于1000px
ul li:last-child{
display:none;
}
}
only:可以排除不支持媒体查询的浏览器
screen：设备类型
max-width|max-height
min-width|min-height
2.响应式图片 （性能优化）
<picture>
<source srcset="2.jpg" media="(min-width:1000px)" >
<source srcset="3.jpg" media="(min-width:700px)" >
<img srcset="1.jpg">
</picture>
网页布局方案
1.什么情况下采用响应式布局
数据不是特别大，用户量不是特别大，纯展示类的项目适合响应式布局
列如：公司官网、专题页面
特别追求性能的，不太适合响应式
2.pc+移动端应该做什么样的布局方案
注意：访问量还可以或者比较大，类似于淘宝网
移动端是一套，会使用自适应的布局方式
PC是一套，会加一点响应式
3.PC的设计图
ui：1980
笔记本电脑：1280
ui图的宽度和电脑的宽度不对应怎么办？
1.把ui图进行等比缩放，缩放成和电脑一样的尺寸
2.换个1980的电脑
4.移动端的设计图
宽度：750
因为750的设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸作为基准点
ES6
var、let 、const
共同的：都是可以声明变量的
区别一：
var 具有变量提升的机制
let和const没有变量提升机制
区别二：
var可以多次声明同一个变量
let和const不可以多次声明同一个变量
区别三：
var、let声明变量
const声明常量
var和let声明的变量可以再次赋值，但是const不可以再次赋值了
区别四：
var声明的变量没有自身的作用域
let和const声明的变量有自身的作用域
作用域考题
console.log(str)//undefined
var str ='hello'
console.log(num) //报错
let num =10
---。
function demo(){
var n=2;
if(true){
var n =3;
}
console.log(n)//2
}
---。
const obj ={
a:123
}
obj.a=111
console.log(obj) // {a:111}
可以修改里面的值
对象合并
const a ={a:1,b:3}
const b ={b:2,c:4}
方式一：
let obj = Object.assign(a,b);//{a:1,b:2,c:4}
方式二：
let obj = {...a,...b}////{a:1,b:2,c:4}
方式三：
function extend(target,soure){
for(var key in soure ){
target[key] = soure[key]
}
return target
}
箭头函数和普通函数区别
1.this指向问题
箭头函数中的我this只在箭头函数定义时就决定的，而且不可修改的（call,apply,bing）
箭头函数的this指向定义时候，外层第一个普通函数的this
2.箭头函数不能new（不能当作构造函数）
3.箭头函数prototype是undefined
4.箭头函数是没有arguments
Promise有几种状态
1.三种状态：
1.pending 进行中
2.fulfilled 已成功
2.rejected 已失败
2.Promise的含义：是异步编程的一种解决方案，解决了回调地狱的问题
3.
Promise.resolve('foo').then(ress=>{
console.log(res);
}).then(()=>{
console.log(1)
}).then(()=>{
console.log(2)
}).then(()=>{
console.log(3)
}).then(()=>{
console.log(4)
}).then(()=>{
console.log(5)
})
结果：foo 1 2 3 4 5
4.async await
function getData(){
return new Promise((resolve,reject)=>{
resolve("1")
})
async function(){
let a= await getData();
console.log(a) // 1
}
function();
}
find和filter的区别
1.返回的内容不同
filter返回是新数组
find 返回具体的内容
2.
find:匹配到第一个即返回
filter:返回一个整体（每一个匹配到的都返回）
some和every的区别
let arr =[6,4,3,5,2]
let a = arr.some(val=>{
return val>4
})
let a = arr.every(val=>{
return val>4
})
console.log(a,b)// true false
some==>如果有一项匹配则返回true
everr==》全部匹配才返回true
reduce、map方法
let arr= [1,2,3,5,6,89,8]
JS数组复习
Vue
vue2生命周期
1.有哪些生命周期
系统自带：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
2.一旦进入到页面或者组件，会执行哪些生命周期：
beforeCreate
created
beforeMount
mounted
3.那个阶段有$el,在哪个阶段有$data
beforeCreate 啥也没有
created 有data没有el
beforeMount 有data没有el
mounted 都有
4.如果加入了keep-alive会多两个生命周期
activated deactivated
5.如果加入了keep-alive,第一次进入组件会执行哪些生命
beforeCreate
created
beforeMount
mounted
activated
6.如果加入了keep-alive，第二次或者第n次入组件会执行哪些生命
activated
keep-alive
1.是什么
vue系统自带的一个组件：
功能：用来缓存组件==》提升性能
2.使用
<div>
<keep-alive>
<helloworld></helloworld>
</keep-alive>
</div>
Vue路由
路由模式有两种：history、hash
区别：
1.表现形态不同：
history：http://127.0.0.1:8080/about
hash：http://127.0.0.1:8080/#/about
2.跳转请求
hsitory:http://127.0.0.1:8080/id //找不到的页面会发送请求
hash：http://127.0.0.1:8080/id //则不会发生请求
3.打包后前端自测要使用hash，如果使用history会出现空白页
SPA
SPA是什么？ 单页面应用
缺点：
1.SEO优化不好
2.性能不是特别好
VUE路由传值
1.显示传值
传：http://127.0.0.1:8080/ab?name=1
this.$router.push({path:"/ab",query:{name:1}})
接：this.$router.query.name
2.隐示传值
传：this.$router.push({name:"Home",params:{name:123}})
接：this.$route.params.name
VUE路由导航守卫
Webpack
Vite
PHP
基础
<?php
$x =10; //使用$来定义变量
$y =9;
$x = $x-$y;
echo $x;
echo "<h1>hello world</h1>";
//单引号不解析变量 双引号解析变量
<?php
$name="张三";
$age = 18;
echo '$name' ;
echo "\n";
echo "$name";
echo "<h1>hello world</h1>";
数据类型
<?php
//标量
// 整形
// 1 2 -1 -2
// 浮点型
//1.2 3.5
// 布尔型
// true false
// 字符型
// //混合类型
// 数组
// $arr = [1,2,3,'abc']
关联数组
$arr=[ 'java'=>'大数据', 'kun'=>'kun', 'name', 'age']
// 对象
// object
// //特殊类型
// 空
// null
// 资源
// resource
常量
define ('ABC','123')//定义
echo ABC;//输出
echo gettype($str); //获取变量的类型
类型转换
echo gettype(intval($str));
echo gettype(floatval($str));
echo gettype(strval($str));
//输出函数
var_dump(strval($null)) //将值和类型输出出来
//判断类型
is_array();
is_string();
is_bool();
is_float();
is_int();
is_numeric();//数值
is_resource();//资源
is_null();
is_scalar();//标量
echo
echo _FILE_;获取当前打开的文件
echo _LINE_ ;获取当前行数
echo PHP_VERSION;//获取PHP版本
echo _DIR_;//获取当前文件的目录地址
echo _FUNCTION_;//获取使用的函数名
常用函数
<?php
//随机数
int rand(void);
int rand(int $min,int $max);
$r = rand(); $r = rand(1,10);
mt_rand();//产生一个更好的随机数
//小数
floor()//不大于该数的最大值 $num = floor($float)
ceil()//不小于该数的最小值
round()//四舍五入取整
//其他
abs:绝对值
pi：圆周率
M_PI 常量；
pow 指数表达式
max 最大值 max($arr)
min 最小值 min($arr)
//字符串
$str = "aBCaD"
strtolower($str)//字符串小写
strtoupper($str)//字符串大写
//空白处理
trim() 去掉首尾空白
ltrim() 去掉开头空白
rtrim() 去掉结尾空白
//字符串操作
字符串截取
substr($str,1,2);//截取字符串 从第一个位置开始到第二个
字符首次出现的位置
strpos($str,'a')
PHP 文件导入和引用
include('1.php');//出现问题报错但还是可以继续执行
include_once('1.php')//相同的文件就引入一次
require('2.php')//出现问题报错但是不可以继续执行//比较标准化
require_once('1.php')//相同的文件就引入一次
数组函数
$arr=['a','b','c']
foreach($arr as $key =>$value){
echo $ass[$key]==$value;
}
$list($a,$b,$c)=$arr;
each $a;//a
each $b;//b
each $c;//c
while($list())
object
<?php
header("content-type:text/html;charset=utf-8");
class Person {
//人的成员属性
var $name; //人的名字
var $age; //人的年龄
//人的成员 say() 方法
function say() {
echo "我的名字叫：".$this->name."<br />";
echo "我的网址是：".$this->age;
}
} //类定义结束
//实例化一个对象
$p1 = new Person();
//给 $p1 对象属性赋值
$p1->name = "PHP中文网";
$p1->age = 'www.php.cn';
//调用对象中的 say()方法
$p1->say();
?>
请求
var_dump($_GET);//接受get传递过来的数据
var_dump($_POST);//接受POST传递过来的数据
var_dump($_REQUEST);//接受所有传递方式传递过来的数据
var_dump($_SERVER);//http请求的详细信息
接受的信息都是数组的形式
错误处理
日期
//设置当前时间的区域
date_default_timezone_set('PRC')
echo time();//获取的是时间戳
echo date('Y-m-d H:i:s',time());
数据库
<?php
//concent sql server
$link = mysqli_concent('locahost','root','123456');
//if concent succse
if($link){
exit ('sql concent fail')
}
//设置字符集
mysqli_set_charset($link,'utf8');
//选择数据库
mysqli_select_db($link,'kun');//kun数据库名
//准备sql语句
$sql = 'select * from user';
//发送sql语句
$res = mysqli_query($link,$sql);
var_dump($res);
//处理结果集
$result=mysqli_fetch_assoc($res);//一个一个往下读，返回的时候一个一维的关联数组
mysqli_fetch_row($res);//返回一个索引数组
mysqli_fetch_array($res);//返回一个有索引又有关联的数组
mysqli_num_rows($res);//返回查询时候的总结果集的总条数
mysqli_affected_rows($link);//返回你修改的，删除的，添加的时候受影响的行数
mysqli_insert_id($link);//返回的是你插入的当前的数据的自增的id
var_dump($result);
//关闭数据库
mysqli_close($link);
Thinkphp6
-
创建项目
composer create-project topthink/think tp -
启动项目
php think run //默认端口8000 php think run -p 80 //指定端口运行
Linux
界面切换
-
文本到图形界面
ctrl+alt+F1 图形界面
init 5
-
图形到文本
ctrl+alt+F2-F6 文本界面
init 3
ctrl+l 清屏
常用目录介绍
- boot 存放启动文件
- dev存放设备文件
- etc 存放配置文件
- home 普通用户家目录，以/home/$username的方式
- media 移动存储自动挂载目录，以/media/$device_name的方式来存放
- mnt 手动挂载目录
- opt 三方软件安装目录
- proc 内存系统文件
- root 管理员家目录
- run 里面的东西是系统运行时需要的，不能随便删除，但是重启的时候应该抛弃
- srv 服务相关数据
- sys 系统文件
- tmp 临时文件
- usr 存放库文件、文档、命令、用户数据
- var 日志存放
- lib 库文件
linux命令
-
命令[命令选项] [参数]
学会看语法：{必选项} [可选项]
| 命令 | 解释 |
|---|---|
| exit | 向后退 退出 |
| ping baidu.com | 发送网络请求 |
| yum grouplist | linux 图形界面安装 |
| yum -y groupinstall "KDE Plasma Workspaces" | 安装图形界面 |
| su 或（sudo su） | 零时进入root权限 |
| ls [-a -l -d] [l 平铺形式展出 d目录形式展出] | 列出目录下的内容 |
| cd .. | 返回上一级目录 |
| ls -a | 列出所有内容包括隐藏的文件 |
| ls -a /tmp | 查看跟目录下temp目录的所有文件 |
| clear | 清屏命令 |
| man | 帮助命令 |
| cd | 进入文件夹命令 |
-
基本命令
- hostname 显示主机名称
- date [-s %F] 显示日期时间
- cal 显示日历
- bc 计算器
- reboot shutdown -r init 6 重启命令
- logout 注销命令
- halt shutdown -h init 0 关机命令
- uname 显示当前操作系统和机器信息
- pwd 显示当前路径
用type来区分命令是内部还是外部命令
-
type type
type是shell内嵌 （内部命令）
-
type clear
clear 是 /usr/bin/clear （外部命令）
-
echo $PATH
查看命令存在那 bin命令任何人都可以使用 ，sbin只能管理员使用
echo 打印输出的意思
-
vim
:wq 保存退出 source 文件路径 ；文件修改后需要执行这个命令 通常修改配置文件后需要执行 linux 环境变量配置文件路径为：/etc/profile 添加环境变量如：在/etc/profile 文件最后添加一行： export PATH=$PATH:/usr/local/node/bin
shell脚本
SQL
crud
-
增加语法
INSERT INTO 表名 VALUES (值1,....) INSERT INTO STUDENT (num,name,sex,age) VALUES(123456789，'zhangsan','男',23) -
删除语句
DELETE FROM 表名称 WHERE 列名称 = 值 DELETE FROM student WHERE num=123456789; -
修改/更新语句
UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 UPDATE student SET age =21 WHERE ID=123456789; -
创建表
create table t_student( num int(13), name varchar(255), age int(3), sex char(1), phonenumber char(11), email varchar(255) ); -
删除表
drop table 表名;，当这张表不存在时会报错 drop table if exists 表名;，如果这张表存在，就删除，建议使用
刷题链接：share.mubu.com/doc/4BHMMbb… 学习笔记：share.mubu.com/doc/uf3vg8s…
!👇序列是sql的执行顺序， select 是最后执行的
vlookup （数仓必备）
prepare the from (准备表格)
-
from:从以下数据库中
-
join:链接表格
select name from table 1 left join table 2 on table 1.name = table 2.name select name from table 1 right join table 2 on table 1.name = table 2.name -
where:将数据按一下条件进行筛选
select name,population from world where name in ('Brazil','China','Indla') -
group by：按照以下字段和条件分组（子查询）（合并） （去重合并）
对表格中的字段进行去重合并
select name from student group by name -
having：在分组后的数据中找到满足以下条件的数据
select name from world where name =! 'kun' group by name having sum(age)>=18
运算符
| 运算符 | 描述 |
|---|---|
| = | 等于 |
| <> | 不等于 |
| 大于 | |
| < | 小于 |
| >= | 大于等于 |
| <= | 小于等于 |
| BETWEEN...AND... | 在指定的两值之间 |
| IS NULL | 为NULL值 |
| AND | 逻辑运算:与 |
| OR | 逻辑运算：或 |
| IN | 条件范围筛选 |
| NOT | 逻辑运算：非 |
查询字段
-
order by：根据以下字段的升/降序进行排序
select Sage AS '年龄正序排序' from students order by Sage 任何一个单独的字段名都可以加降序排序（DESC） SELECT Ssex AS '性别倒序排序', Sage AS '年龄正序排序' FROM students ORDER BY Ssex DESC,Sage -
limit：留下指定行数或指定位置的数据
limit n返回前n行 limit x,y 从x开始往后进一个返回y行 limit 10,2 则返回第11行到十二行 -
select ：（在已经查询好了的数据中）查看以下字段
处理函数
-
distinct去重
distinct还可以进行去重计数
count(distinct 字段)
-
like模糊查询 %
%:表示任何字符出现任意次数 select name from world where name like 'c%la' c213213la csakfjala c4468oplppliuu98la _:表示任何字符出现一次 就是占位符 []:指定一个字符，它必须匹配该位置的一个字符 ^:在[]中使用，表示否定 where col_1 like '_[^JM]%'筛选出的是，是第二个字符为非j且非M的数据。函数
函数 说明 AVG() 返回某列的均值 COUNT() 返回某列的行数 MAX() 返回某列的最大值 MIN() 返回某列的最小值 SUM() 返回某列的和 子查询
就是一次查不出来，对子条件进行筛选
select * from EMP where age <(select avg(age) from EMP ) having 子查询 select job,avg(age) from EMP group by job having avg(age)=(select max(avg(age))from EMP group by job)窗口函数
-
left函数
left(s,n)返回字符串s的前n个字符 -
over窗口函数
MYSQL
命令
-
begin
-
安装
管理员身份进入mysql的bin目录下运行mysqld -install -
初始化数据文件
mysqld --initialize-insecure --user=mysql -
进入管理界面
mysql -u root -p //p后面跟密码 mysql -u root -p123456 -
修改root密码
update mysql.user set authentication_string=password('123456') where user='root' and Host = 'localhost';（版本5.7） ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';（版本8.0） -
刷新权限
FLUSH PRIVILEGES; -
开关mysql
net stop mysql net start mysql
-
数据库
-
数据库类型
tinyint 1B -128~127 smallint 2B -32768~32767 mediumint 3B -8338608~8388607 int 4B -2147483648~2147483647 bigint 8B float(m,d) 4B 单精度 m总个数 d小数位 doublue(m,d) 8B 双精度 m总个数 d小数位 decimal(m,d) decimal是存储为字符串的浮点数 char 0-255B varchar 0-655355B date 4B auto_increment 4B 自动增加，只用于整形，可以设置初始值，默认唯一 常与primary key 一起用 用来设置主键自增 创建表时在整形字段后加上：auto_increment = 0 primary key; 修改起始值：alter table kun auto_increment = 起始值 -
查看数据库
show databases; -
创建数据库
create database kun; -
删除数据库
drop database kun; -
进入数据库
use kun; -
创建表
create table kun(id int auto_increment primary key,username varchar(25),password varchar(32)); -
查看表
show tables; -
查看表数据
desc kun; -
查看创建表的语句
show create table kun;//数据库同理 -
删除表
drop table kun; -
修改表字段
将kun表中password字段该名字为psw； alter table kun change password psw varchar(255); -
删除表字段
alter table kun drop psw; -
插入字段
alter table kun add psw varchar(32) first;//插入前面 alter table kun add psw varchar(32) after name;//在name后面插入 -
修改表名
alter table kun rename kun_tabe;CRUD
-
C
insert into user value(1,'kun',123,18) insert into user value(id,'kun',123456,18); -
R
上面复习sql中查看 -
U
UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 UPDATE student SET age =21 WHERE ID=123456789; -
D
DELETE FROM 表名称 WHERE 列名称 = 值 DELETE FROM student WHERE num=123456789;
-
