前端笔记

d1

知识点
1、 html超文本标记语言
2、 web标准：结构html,表现css, 行为javascript
3、 safari 苹果浏览器，Opera 欧朋浏览器
4、 UTF-8万国码，gb2313和GBK中文码
5、 h${我是标题好h$}6 为同时生成h1—h6的代码
6、 同级 ./ 上级../ 下级 /
7、 空链接：空链接
假链接（显示小手光标）：假链接
8、空格: &nbsp； <: &lt； >:&gt； 人民币符号：&yen； 版权符号：&copy；
9、删除线： 或
软件快捷键
1、 注释：ctrl+？
2、 自动折行：alt+z
3、 向上插入一行：Ctrl+shift+enter
4、 向下插入一行：ctrl+enter
5、 生成多个标签： 如td7 再按tab或enter
6、 多行同时输入内容：移动至光标处长按鼠标中键拖拽，或shift+ctrl+鼠标左键
7、 Ctrl+D：按一次为选择该词，按两次选择两个，按三次选择三个

移动web
*如果鼠标经过的的盒子本身需要转换时间（transition），这transition：all，1s；直接加在鼠标的：hover中，否则加在需要转换的盒子css中。（知道是不是这样）
*img（w100%；display:block:）后面的display房子图片掉出来。
*flex布局务必要给盒子设置高度（min-height）不然后面的盒子可能会塌陷上去
*mu-row多行省略、sin-line单行文字省略号

jsd2
*ab两边比较会发生类型的隐式转换，如1’1’为真
*a=b两边数据和数据类型完全一样时才为真（与! 一样只有两边是同类型数据时才进行比较）
*运算时’ ’、0，null，undefined，NaN 相当于flase
*逻辑运算时，运算符两边不是布尔型数据（true/flase）时，会输出最后比较的数据(不为0的数)，如（123|| 456）会输出123，（0|| 456）会输出456
*逻辑与&&和逻辑或||在一起时先算逻辑与&&。（&&优先级大于||）
*逻辑短路：与运算、或运算从左至右运算到能得出结果时就停止运算。
jsd3
*isNaN('11')=flase、在该判断中‘11’会隐式转换为11
*一元运算符中逻辑非！优先级高于++ --，仅次于括号
*switch 的case后的数值n为数字型数据，当需要输入n时，一定要把 prompt得到的n转换成数字型数据
*判断输入是否不是数字用isNaN
一个字符串型的数字可以和一个数字比较大小，两个都是字符串型数字不能比较：如“1”和“2”比较的是ascll码
三元表达式返回的是一个值，可整体赋值给某个值：var d =a ? b : c
switch(n)的n和case后的n是全等===
jsd4
新增数组元素赋值可用arr[arr.length]=...方式
给数组名赋值会覆盖所有的数组元素（变成变量也不再是数组）
jsd5
1、冒泡排序的循环外圈为arr.length-1次,内圈为length-1-i次。
2、return只能返回一个值，如return(num1,num2) 返回的是最后一个值num2。想返回多值时可用一个数组返回
3、i++为先返回i，再自加。++i为先自加在返回i ,无论如何在下一次出现i是已经是自加过的i，即使在同个公式出现也一样
4、第二种函数声明方式为var fun=function(){ }; funcion()称为匿名函数
5、arguments 在函数内使用，当不确定有多少个参数传递的时候，可以用 arguments （伪数组）来获取
6、argument是伪数组，但实际是对象，不能整体当成数组赋值给其他数组

jsd6:
1、 全局变量是在全局作用域下var声明的变量
2、 局部变量是在函数内部var声明的变量
3、 特殊情况下在函数内不使用var声明的变量也是全局变量（不建议使用，所以for循环里的计数器i不要忘记加var ）
4、 作用域链：内部函数访问外部函数的变量时，采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链 就近原则
5、 （面试题）预解析分为：变量预解析（变量提升）和函数预解析（函数提升）
变量提升：就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作。【所以看似变量没有var声明也能运行，但当涉及全局/局部变量没var的变量就会出问题，所使用在不同作用域里用同名变量务必 要声明】
函数提升：就是把所有的函数声明(包含内容)提升到当前作用域的最前面 不调用函数。【所以看似函数可以先调用后声明，只限于命名函数声明的方式，不适用于匿名函数的声明，匿名函数实际是函数赋值给变量，所以只能变量提升】
注：所以程序在当前作用域是最开始预解析好(声明)变量(不赋值)和函数才向下执行代码的
6、 对象：var obj={ name: ’盲僧’,
age: 28,
sing: function() { onsole.log(‘好汉歌’)}
}
其中属性名name，age，sing是字符串，调用时可用对象名.属性名和对象名[‘属性名调用’]两种方式。对象里的函数称为方法，只可用obj.sing()形式调用
7、 对象的构造函数的函数名首字母要大写

8、 New关键字执行过程

1. new构造函数可以在内存中创建一个空的对象
2. this就会指向刚才创建的对象
3. 执行构造函数里面的代码，即对这个空对象添加属性和方法
4. 返回这个对象
   9、遍历对象：for( k in 对象名) {
   Console.log([k]);
   }
   10、infinity:无穷大
   11、js内置对象：
   Math：.max()最大，.min()最小，.abs()绝对值，.floor()向左取整，.ceil()向右取整，.round()四舍五入,0.5时向右入，random()得到一个[0,1）的小数
   Jquery
   1、 checked=1为input的复选框属性
   2、 *n.toFixed(2)截取小数点后两位
   3、 *数字字符串前加+可转换成数字型
   4、 CSS中translateX/Y( ),括号里的不是移动的位移，而是和left 一样是位置
   5、 *页面失活状态（切换到其他页面）下定时器是运行的，网页其他代码不运行
   6、 *dom对象转换成Jquery对象直接$()
   7、 *Jquery对象转换成dom对象，直接加$()【0】或$().get(0)
   8、 模板字符串（js通用）：****${****}**** 记住字符串两边加飘号，${}中间放置变量
   9

数据可视化
1、 echarts基本使用步骤：*引入echarts的js库
*设置一个装图标的盒子
*初始化echarts实例对象（var mycharts=echarts.init(盒子对象)）
*指定配置项和数据var option={……..}
*将配置项和数据设置给实例对象 mycharts = setOption(option)
2、数据可视化每个模块务必使用立即函数建立单独的作用域（两个立即执行函数间一定要加分号；），然后最后注意适配屏幕的尺寸
（funtion(){
var mychart=echarts.init(document.querySelector(‘div’))
var option={….}
mychart.setOption(option)
window.addEventListener(‘resize’,funtion(){
mychart.resize() // resize()为jQuery方法
})
}）（）；

12、【拓展知识】：简单数据类型是存储在栈里的（单数据类型有：number, string, null, undefind, bealoon）
复杂数据类型是存储在堆里的，地址值(对象名)存在栈里（复杂数据类型有：数组，对象，函数）
如图：输出的对象是obj2= {uname: '方方', age: 89, sex: '女'}

1
 
13、预解析拆分还原（先把变量声明，函数声明放在最前）：
14、取整函数建立：
15.对构造函数new一个对象叫做构造函数的实例化
 
jsday6
1、封装日期函数

Webapis
1、

易错点：
Js

1. *prompt未转换为数字型
2. *循环i 未定义（加了var的i就是for里的局部变量才不会对其他i产生影响）
3. *数组长度为.length 而非.lenght
4. *自绝父相，上下左右为零可居中元素
5. *字符串中加变量：引引加加中间加变量，‘+ +’
6. *获取批量标签querySelector忘加All
7. *break 退出循环，return退出函数
8. *trim()为去除字符串两侧的空格/null
9. function getrandom(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min
   //取值区间 由[0,1) > [0,max-min] > [min, max]
   }
10. obj.onclick()=funtion()重复会赋值覆盖和
    obj.addEventListener(x,x,x)可以重复
11. *用js给style 的属性赋值时忘记加px
12. e.stopPropagation(); 阻止事件冒泡，如用于点击小叉号，但不想触发叉号外的盒子
13. animation-play-state: paused动画停止 一般是设置给鼠标移入经过hover的时候；
14. jQqurey中$('.sup li').eq(index).mouseenter().mouseleave() 可处理冒泡影响
15. jQqurey中$(‘son’).triggerHandler(mouseenter): 防止默认事件触发（如mouseenter在jQurey中自动触发会冒泡）
16. 请求忘记用按需导入用{}
17. vue引入时@后少/

WebAPi小点

1. webapis中children[x]是获取子元素节点 也是我们实际开发常用的，childNodes[x]是获取所有的子节点 包含 元素节点 文本节点（无标签的文本）等等
2. 防止鼠标双击选择文字代码：
   window.getSelection ? window.getSelection().removeAllRanges(): document.selection.empty()
3. e.stopPropagation() 为阻止事件冒泡
4. ondblclick 鼠标双击事件
5. input.select(),中select()方法为全选表单中文字并获取表单焦点（默认下鼠标点击表单才能获取焦点）

js高级

1. 对于复杂数据之间的等号赋值，实际是地址之间的指向改变。如
   Son.prototype= Father.prototype 是指son的原型对象地址指向了Father的原型对象，所以
   Son.prototype和Father.prototype都指向原本Father原型对象的内存空间
2. ES5中构造函数里的方法继承为什么不能用Son.prototype=Father.prototype,因为耦合性高，改变Son的原型对象也会会让Father的原型对象更改，所以需要改成
   Son.prototype=new Father(); Son.prototype.construnctor=Son
3. 静态成员：在构造函数本上添加的成员称为静态成员，只能由构造函数本身来访问
   实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问
4. super 关键字: 调用构造函数（super作为函数时的使用, 调用普通函数（super作为对象时的使用）super.say() 调用父类的普通函数
5. 数组(循环)方法：
   arr.forEach(funtion(value,i,arr){}) 不返回值，
   arr.map(funtion(value,i,arr){}) 返回新数组，return 新数组元素
   arr.filter(funtion(value,i,arr){}) 返回新数组，return 布尔值（ 返回ture,返回当前数组元素）
   arr.some(funtion(value,i,arr){}) 返回布尔值，return 布尔值（有一个元素符合条件some就返回true,并跳出函数 ）
   arr.every(funtion(value,i,arr){}) 返回布尔值， return 布尔值（所有元素满足条件，every才返回 true）
   6）对象方法
   Object.key(obj) 返回对象obj的属性构成的数组
   Object.defineProperty(目标对象 , 属性名 , descriptor) 定义新属性或修改原有的属性
   其中特性对象descriptor={
   value : 100
   writable: false [是否可读写]
   enumerable: false [是否可遍历/枚举]
   configurable: false [是否可删除属性，或用该方法修改其他特性]
   }
   *删除对象的属性方法 delete(obj.id)
   *由方法Object.defineProperty() 创建的属性特性值默认为false
   7）回调函数（函数里有个参数为函数，该参数函数为回调函数，回调函数在整个函数执行完再执行 fn(a, b, callback){…..}）

8）闭包(closure)： 指有权访问另一个函数作用域中局部变量的函数，变量所在的函数为闭包函数
9）.的优先级比=的优先级高，如下题a.x=a={ n:2 } ,执行顺序是先创建a.x 后创建{ n:2 }，然后从右向左，（结果输出undefind { n:2 }）
10）箭头函数中不能使用argument，可以用剩余参数接受未知个数的实参 fn=(…args){} arg为数组
11）参数运算符可去掉数组的[]形成带逗号的参数序列,也可用于两个数组合并，也可以将伪数组转换成真数组如[…lis], 同时伪数组转真数组也可以用Array.from()方法
12）可利用set数据结构的数值唯一来去除数组中的重复值，俩个步骤：const s=new Set(arr); arr=[…s]

19. Object.assign()：Object.assign(target, ...sources) 参数： target--->目标对象 source--->源对象
    返回值：target，即目标对象（会改变原对象），和$.extend()效果相同
    Ajax
    1） 表单项目中提交数据大部分用post提交，因为post比get更隐秘（信息不回在地址栏显示），且post用于大量的、复杂的数据提交
    2） 使用json两个方法进行对象深拷贝：newobj=JSON.parse(JSON.stringify(obj))
    3） 原生api中的。.reset()用于清空form表单内容，jqurey中的.serialize()可获取from表单中的数据(通过from中的name属性来识别获取数据)
    4） 当原生ajax请求中数据由表单函数获取的fd时，post请求不需要写第三步,即xhr.setRequestHeader ()。因为表单中含有enctype属性会自行进行编码规定
    5） .toUpperCase()为字符串小写转大写方法
    6） 字符串变数组方法：arr = str.split(“,”) 即通过字符串中的，来分割成数组
    7） 数组变字符串方法：str=arr.join(“”) 即将数组元素拼接成字符串，join中的字符指通过什么字符来拼接数组元素，一般为空字符“”，空括号则默认是用逗号拼接
    8） *JQuery里$(document)和$(window).你不需要就引号
    9） *$('ele:checked'),其中:checked选中的是复选框为true的jquery对象
    10） *由于刷新时页面位置是不会返回顶部的，需要单独设置返回顶部等悬浮栏函数刷新就运行一次
    11） *$('**').on('click', function (e) {}）on方法可以给动态绑定事件（可给新增项绑定），如单独的click不能动态绑定
    NodeJS:
    1、 如let a=b=10; 其中a是let 声明的，b默认是var声明的。如下面面试题结果是a=10,b=20
    2、
     
    Npm
20. npm init -y 命令用于创建package.json(用于记录用了哪些包，该命令运行只能在英文文件夹下运行成功，且文件名不能有空格)
21. npm install/i 可一次packgage.json中的记录的所有包
22. 卸载包：npm uninstall 包名
23. npm i webpack -D 该命令是将包装到Dev...即只在开发时用的包（如工具包webpack），上线不需要的。
24. npm config set registry=url 为设置下包地址
25. npm config get registry 查看下包路径
    大事件项目
    *本地储存方法：localStrorage.getItem('属性名')
    *正则中//g代表全局匹配，其他如i是忽略大小写等，str.replaceAll()为ES6的全局替换
    *ctrl+c关闭终端的服务器

Vue基础
1、计算属性（必须有返回值）不可以执行异步任务，如执行定时器任务，监视属性和方法可以
2、对象的key名为一个字符串，一般要带引号
3、select 标签中的multiple 可把所有选项并列摆放，实现多选
4、两个重要的小原则：
1.所被Vue管理的函数（如methods、computeds、watch中的函数），最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象，不然写普通函数默认找的是window。
5、Math.random()取值为[0,1), 要想区[0,5]则写成Math.floor(Math.random()6)，要想取[5,10]则写成Math.floor(Math.random()6)+5。
vue
6外加template不会影响HTML结构，渲染时不会显示，能配合v-if 来控制结构是否显示
7、查询字符串方法str.indexOf(val)中，如果val为空字符串，方法输出的是0，而不是-1，并且任何字符串都包含空字符串
8、任意代码段上下加#region和#endregion可在vscode中折叠
9、arr.include(val),数组中有val返回true
10、vue中mounted(){}里代码会立即执行一次
11、todolist中最后一步用vue的watch的深度监视将数据存入本地存储或数据库
12、input的自动获取焦点属性autofocus
13、想完全从某个分支拉取代码，可将该本地分支删除（git checkout -d 分支名）再用git checkout -b 分支名 origin/分支名
14、debugger为打断点代码
15、Promise.then(res=>{}).finally(res=>{})中finally为失败时调用
16、label和input绑定点击label可获取焦点
姓名

17、readonly表单只读属性
18、vue展示到页面的数据是undefined时是不会显示的，不会报错
19、动态组件组件缓存中keep-alive标签中的include="组件名"--包含在内的被缓存 exclude="组件"--除该组件其他的都被缓存
20、prop中接受数据（list）有属性type，默认返回值default：()=>({})，验证器函数validator(val){ },其中函数返回false会报错，返回值真不会，用于限制该数据(list)的长度
21、input中type="radio"时，有相同的name 可以实现单选
22、nuxt用于做vue多页面网站
23.// this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性
24.// this.$router：全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。
25.vue路由中hash模式不会向后端发送请求，路径有#号
26.location.href=“”跳转页面
27.@/是Vue特有的路径标识，表示从src路径开始
28.directive 指令
29. input 的autofocus 为自动获取焦点属性
30.模块指的就是js文件，模块化就是把js文件拆成多个js模块
31.组件化，将某个页面按不同功能的组件拆分
32.隐式原型属性__proto__ 即实例对象.proto 指向原型对象
33.显式原型属性prototype 即构造函数.prototype 指向原型对象
34.路由元route（当前激活的路由），$route.meta的meta对象可携带数据。
35.async后的异步函数默认返回promise
36.组件自闭合标签在vue脚手架中没问题，在非脚手架有问题
37.在vue写事件方法时一定要注意，需要操作dom元素的方法一定要用async+await+$nextTick()的方法写，让Dom挂完在注册事件
38.babel是ES6转ES5的模块
39.浏览器刷新ctrl+R
40.传给props数据不能改，否则会报错
41.混合配置项mixins:[...]，是混合mixins.js，不是替代
42.外壳App.vue的样式一般不写scope，内写的样式一般用在全局
43.histroy模式缺点：线上刷新会报404错误
头条移动端
1.建立项目：vue –V , nrm ls 查看镜像源，vue create xxx, 选择第三项进行自定义配置，按空格选择Babel+Router+vuex+css+linter，回车下一步，，，选Eslint 标准版，选择保存时检查lint，选babel eslint配置选第一个单独文件设置，最后的Y/n表示是否保存配置并在下一次出现用于选择。
2.与远程仓库建立联系git log查看git commit提交历史
git remote -v 查看远程仓库配置
git remote add origin(小名) git@github....(大名)
git push -u origin master (push 到远程的某个分支)
3.全局引入vant，和vant CSS
4.解决移动适配安装afme-flexible并引用，以选择基础值，安装插件 postcss-pxtorem (该插件无法转换行内样式，字体大小需要在style中设置，或在行内样式中将px改成rem),新建.postcssrc.js配置,
5.创建页面组件，配置路由，并使用懒加载( component：()=>{ import(“@/views/login.vue”) } )，进入该路由才加载组件，防止也首页加载时间过长
6.引入组件，可用样式穿透:deep（）更改组件中不能更改的样式
7.form表单要默认提交每一个input都要添加name属性
9.less中&代表父亲样式， 。.A.B交集选择器
10.使用export * from './user' 表示把api的user.js中所有按需导出的数据暴露出去。
11.export default xxx ,默认导出实际导出的是default对象，可改成按需导
export { default as xxx } from "..."
12.vuex的store用法
12.熟练localStorage.setItem和localStorage.getItem,localStorage.remove的封装
13.// 结构赋值
// - 数组 const [a,b] = ['你好','hello'] 拥有命名权
// - 对象 const { name,age } = {name:'张三',age:18} 没有命名权
// - 对象的连续解构赋值 : 一层层的来const { friend:{ name } } = {name:'张三',friend:{ name:'李四' }}
// - 对象结构赋值当中的命名 const { friend:{ name:person } } = {name:'张三',friend:{ name:'李四' }}

14.登录时不能直接将token存入本地存储，本地储存数据不是响应式的，需要先存到Vuex的store.state中，确保页面挂载和token数据是同步的，
15.try和catch可用于捕获任意代码段报错，try { A代码段执行 } catch { A代码报错时执行 }，如：可用于处理判断字符串是否为JSON字符串，
16.vant组件轻提示
this.$toast.sucess('成功') /
this.$toast.fail('失败')
this.$toast.loading({
message: '加载中',
forbidClick: true
})

17.值前加两个！！转成布尔值
18.//calc()方法为计算

元素的宽高宽, 运算符的两侧必须有空格
.van-tab__pane {
min-height: calc(100vh - 92px - 88px - 100px);
}
19.css属性的unset不设置值max-width: unset;
20.对函数特定的备注：/** 可对函数形参、返回值进行备注
21.在request.js文件中封装请求拦截器：给每个已经登录的用户请求头加上token,注意Bearer后要加空格....给每个请求添加拦截器，并在拦截器中判断是stroe中是否有token，如果有则在拦截的请求配置对象中添请求头，headers.Authorization='Bearer ' + store.state.tokenObj.token
22. :deep(.van-tabs__content) {
// 符号的两侧必须有空格
max-height: calc(100vh - 92px - 88px - 100px);
padding-bottom: 100px;
overflow: auto;//显示滚动条
}
23.//自定义一个50%的失败
if (Math.random() < 0.5) {
console.log(a)
}
24.try{} cath{} finally{}中finally是不管是否成功最后都会执行
25. $event： 只在vue模板中使用
它在原生事件表示：事件对象
在自定义事件当中：表示子组件传递来的第一个参数如@change-active="active = $event"
26. 常见的宏任务有（Ajax请求,定时器函数，文件操作方法等），常见的微任务有（promise.then().cath().finally()）
. *动态组件 中的propname可传入动态组件中的
*methods: {
//请求防抖处理
//1.设置定时器，延时执行
//2.清除上一个定时器（要把定时器id挂在this组件实例上）
getSearchSuggestions() {
clearTimeout(this.id)
this.id = setTimeout(async () => {
try {
const { data } = await getSearchSuggestionsAPI(this.keywords)
this.suggestions = data.data.options
} catch (e) {
this.$toast.fail('获取搜索建议失败')
console.dir(e)
}
}, 300)
}
}
*引用lodash方法
*在正则里传变量（动态正则）：
new RegExp( 变量，修饰符 )，如new RegExp( a , ‘ig’ ) 等于 / a /ig
*字符串的replace第一个参数可以是正则
第二个参数可以是函数，函数的返回值是要替换的字符串match：正则匹配上的字符
Auglar'.replace（/a/ig，function（match）f return'$[match）
*动态正则
字面量/aasdasd/ig
new RegExp（量，'ig'）
*浏览器内置函数Boolean( null || undefind || '' ) = false
****arr.filter( boolean ) 经常用于去除数组中的假值，相当于arr.filter( item=>boolean(item ) )，即将filter里的匿名函数替换成boolean函数名
*上传头像的input标签属性：type=file，用户选择图片会触发input的change事件，hidden为隐藏属性，选定图片格式accept(.jpg , .png )，加multiple可选择多个文件
*获取了文件的input(用e.target获取)，身上会挂载一个files伪数组，存储用户选择的所有文件对象（不能被src直接识别，通过window.URL.createObjectURL( file[i] )将文件对象转成src可识别的Url）
*关于vue模板数组索引号[0]取值报错Cannot read properties of undefined (reading '0')" ，可以将这个数组v-for循环的方式来解决
*img的src 可识别路径，base64编码(用DataURL读)，图片对象，网址
*用户选择图片后如何显示图片?
// 1. 获取file对象 --> e.target.files
// 2. 把file对象转成img的src可识别的格式
// - objectUrl --> URL.createObjectUrl(file对象)
// - 缺点: 内存泄露 因为跟document绑定在一起
// - 优点: 写法简单
// - Base64 --> FileReader(读文件对象)（异步方法）
// - fr.readAsDataURL(file)
// - fr.onload = (e)=>{ e.target.result }
//请求传递表单用new FormData
*// 如果传的是对象, axios默认将对象转成json并且加上content-type=application/json
// 如果传的是formDate表单, 那么axios会将表单提交给后端, 并且默认的加上content-type=mutipart/form-data
// 如果后端要的是表单(form-data)
// const fm = new FormData()
// fm.append(表单的name,表单项)
go(-1): 原页面表单中的内容会丢失；
this.$router.go(-1)：后退+刷新；
this.$router.go(0)：刷新；
this.$router.go(1) ：前进
back(): 原页表表单中的内容会保留；
this.$router.back():后退 ；
this.$router.back(0) 刷新；
this.$router.back(1)：前进
*.让主体内容过长滑动的样式：// 主体
:deep(.main-wrap) {
position: fixed;
left: 0;
right: 0;
top: 1.22667rem;
bottom: 1.17333rem;
overflow-y: scroll;
padding: 10px;
background-color: #fff;
}

人资项目
1.动态路由和query属性传值 页面刷新参数不会丢失， params会丢失
2.动态路由一般用来传1个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。
3：动态路由在路由中path配置为path: '/detail/:id'，跳转时页面时this.$router.push('/detail/' + id)，跳转后页面获取参数this.$route.params.id
4.函数类型的props可以实现子传父，原理为可以把父的一个函数通过标签传给子，子接受后调用即可（子值通过函数形参传出）

*vuex中getters方法的第二个参数为getters自己这个对象
*批量导入:
const req = require.context('./svg', false, /.svg$/)
// node.js的require模块中的context是批量导入文件路径方法
// req=require.context('查找路径'，是否查找子目录，正则匹配文件后缀)
console.log(req.keys())// req是一个方法，.keys() 得到所有找到的文件路径
console.log(req('./dashboard.svg'))// 根据路径找到对应的模块
// [1,2,3,4].map(fn) 相当于[1,2,3,4].map(ele=>fn(ele))
// 定义导入svg文件模块方法
const requireAll = requireContext => requireContext.keys().map(requireContext)
// requireAll(req){
// return req.keys().map(item=>req(item))
// }
requireAll(req)
console.log(requireAll(req))

• [1,2,3,4].map(fn) 相当于[1,2,3,4].map(ele=>fn(ele))，fn就是作为map里的回调函数
  *当input更改数据后要获取焦点需要用this.$nextTick(() => {
  this.$refs.pwdinput.focus()
  })
  *组件如果没有开放click点击事件，可以通过click.native()来实现
  *使用cookie存字符串步骤，下js-cookie包，引入import Cookies from 'js-cookie'，
  分别方法使用Cookies.set( key名，字符串 ) ，Cookies.get(key名)，Cookies.remove(key名)
• await后面可以是同步数据，如果是同步数据则正常返回
  *自定义指令全局遍历绑定：

*await后面可以是同步数据，如果是同步数据则正常返回
*vue中如需要在样式表中使用@别名的时候，需要在@前面加上一个~符号，否则不识别
*// 任何一个路由跳转 都会进入这个全局前置守卫
router.beforeEach((to, from, next) => {
// ...
// to 将要进入的目标
// from 当前导航正要离开的路由
// next Function
// next() 意味着都 当前这个钩子 结束 进入下一个
// next(false) 中断当前的导航
// next('/') 或者 next({ path: '/' }) 跳转到一个不同的地址
// 当前的导航被中断，然后进行一个新的导航})
*图片加载不出来会触发img标签的onerror事件
*await的作用是让函数异步执行，而非拿后面的值
*elementUI的form的v-model为：model
*{ ...obj } 可实现深拷贝
*// 自动批量注册组件
// require.context('查找路径', 是否查找子目录, 文件后缀名)
const reqCommponents = require.context('./', true, /.vue$/) // reqCommponents.keys()获取所有组件路径
const componentList = reqCommponents.keys().map(ele => reqCommponents(ele)) // reqCommponents（路径） 获取所有组件对象
// .map(ele => reqCommponents(ele))可简写成.map(reqCommponents) /reqCommponents是一个函数
export default (Vue) => {
componentList.forEach(ele => {
// 注册组件
Vue.component(ele.default.name, ele.default)
})
}
*具名插槽旧语法：在标签加slot="名" 标签不一定是template，新语法必须在template上加v-slot:名
*三元新增语法：obj ?. value ?? .id 表示obj存在返回obj.value 不存在返回obj.id

*删除对象属性：delete obj.key
*作用域插槽：组件的slot标签的数据以一个对象的形式转给父组件，父组件可用v-slot="scopeObj" 渲染不同结构的内容，老语法为slot-scope=""
*obj[变量]

  <a        *href="http://localhost:8888/static/img/login-logo.758b34e9.png"
    download="login-logo.758b34e9.png"
  >点击</a>

•  // Es6新增对象方法 得key值数组：Object.keys(),得value值数组Object.values(),得各键值对数组Object.entries()
  

**v-model 用在组件上

v-model 用在一个组件上 会默认被解析成 名为 value 的属性 名为 input 的事件
<BaseInput v-bind:value="test" @input="test=$event">

*xxx.sync可以解析成 :xxx="xxx" 加 @update:xxx='xxx=$event'
*强制文本不换行css样式：white-space: nowrap;
*v-model 也可以通过 model:{prop: 'checked', event: 'change'} 字段来修改属性和事件
*子组件用this.$attrs对象 可得到父组件所有:xxx,传过来的值，即可以省略在props中接那些属性（$attrs.xxx)
*inheritAttrs:false 可去除子组件结构上加的prop的属性，实际仍然有传
*git stash 暂存当前分支去查看其它分支，git stash pop回到当前分支的暂存
*vuex中在user模块里调用permisson模块的mutation/action方法加root(通过根目录访问) 如xxx.commit('permissions/setRoutes', xxx, { root: true })
xxx.dispatch('permissions/setRoutes', xxx, { root: true })
*Array(11)创建一个长度为11的空索引空值的数组
*Array.from和arr.map方法类似，即生成和xxx数组有映射关系的新数组， xxx=Array.from(arr,(数组元素，索引号)=>return 新元素)
*一个HTML里的两个script代码块是两个宏任务
*push代码前防止远端该分支有人改动需要pull一下再解决冲突后，全局搜索<<<<，没有冲突后再push
*移除console：npm install babel-plugin-transform-remove-console --save-dev，
在label.config.js中配置'plugins': ['transform-remove-console']
*script标签需要写闭合,link标签不要
*对象的属性名为对象或数组时，会调用to.String(),,对象都会转成[object,Object]
*then(null,null) 等于 then( v=>v,r=> trow r ), .catch( （）=>{} ) 等》then（null,()=>{}）
*day.js格式化时间库
*new如果有调用会跟最近的函数调用结合
如果new 一直找到最后也没有（）会和最后的函数结合
new Date.AAA()
：：v-deep 为sass深度穿透

人资步骤
1.使用vue-element-admin后台前端解决方案

1. 修改端口号:在dev环境中添加port:8888

项目练习：
1、//注意元素新增函数里的初始化函数一定要放在该函数最后
2、善于使用||和&&逻辑中断编程
3、面试题： flag为true,flag2为false

算法：
*一个按钮点多次用flag(判断是记得还原)
*一个弹窗一直弹用do while
*可以利用逻辑短路进判断，如：typeof callback === 'function' && callback() 当前面为真才会运行函数
 
英文单词
meta 元
content内容
cherset字符集
scale比例、规模
initial最初的
device 设备
equiv 等价的
demo 演示
weight重量
width宽度
height 高度
url网址
href链接
target 目标，靶子
transform 转换
translate（X/Y）位移（翻译）
rotate旋转
angle角度
turn转动
transform-origin旋转原点，起源scale缩放比例
transition 过渡
perspective透视，远景（取值大于盒子长宽）
animation-name动画名称animation-duration动画持续时间
班：
Js:
propmt提示
alert警报：console安慰（控制台）
varble变量
log日志
parse解析
default 默认
switch 开关 交换
average 平均数
score 分数
odd 奇数
even数
continue 继续
arguments 参数，争论
leap 跳跃，剧增
leapyear 闰年
ceil 天花板
floor 底板
purple 紫色
stop propagation 停止传播