该文章作为本人暑期学习和实战的经验总结，如有错误请各位大佬指正。
一.HTML与CSS的知识点总结
(1) autocomplete="off"
input表单默认为autocomplete="on"。
该属性会记录用户在input中输入的信息，有时会暴露用户的隐私数据，故要设置该属性保障用户信息隐私安全。多用于注册，登录等重要信息的输入框上。
如：
<input type="text" autocomplete="off" />如果想整个表单元素都不使用autocomplete功能，则在form标签中添加autocomplete="off"。
如：
<form action="#"autocomplete="off">
<input type=”text” />
</form>(2) type=”button”
form表单中button如果不做设置默认为type=”submit”，该属性会把表单信息提交到action属性中设置的url地址，如果没有设置action，则默认提交给当前页面，由于该属性的存在，点击提交按钮后会直接提交信息，不会执行ajax命令，因此出现了后端接收到数据，而前端的ajax不执行的情况，要避免该情况要添加type=”button”。
如：<button type=”button”>提交</button>
(3) Switch开关
<input type="checkbox" class="switch">/* 必须是input为checkbox才能实现 */
.switch{
outline:none;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
position:relative;
width:40px;
height:20px;
background:#ccc;
border-radius:10px;
transition:border-color .3s,background-color .3s;
}
.switch::after {
content: '';
display: inline-block;
width: 1rem;
height:1rem;
border-radius: 50%;
background: #fff;
box-shadow: 0, 0, 2px, #999;
transition:.4s;
top: 2px;
position: absolute;
eft: 2px;
}
.switch:checked {
background: rgb(19, 206, 102);
}
/* 当被选中时：伪元素显示下面样式 位置发生变化 */
.switch:checked::after {
content: '';
position: absolute;
left: 55%;
top: 2px;
}效果图如下：
当然这是最笨的原生写法。
开发常用的组件库（Element-Ui）：https://element.eleme.cn/#/zh-CN/component/switch
效果如图：
/*绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。*/
<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
<script>
export default {
data() {
return {
value: true
}
}
};
</script>二.Javascript,JQuery,Ajax,Vue等知识点总结
(1) localStorage与token
详见：localStorage和sessionStorage区别 - 前端—小白 - 博客园
我的做法是在登录成功后在Ajax的success里面进行本地储存接收到的token，在每次需要提交的时候再拿出来传给后端。
//Ajax的success函数
//登录成功的时候储存
success: function (result) {
token=result.data;
var localStorage = window.localStorage;
localStorage.setItem("token", token);
window.location.href = "index.html";
// console.log(token)
},//要用的时候取出来
var token = localStorage.getItem('token');//放在Ajax的headers里面传给后端
headers: { 'token': token},(2) 两个html之间的值传值从一个html页面传值到另一个页面,两个html之间的值传递(js location.search用法)_陈朝的博客-CSDN博客_html传值给另一个html
我的做法：
hobby: function (e) {
var that = e.currentTarget.id;
window.location.href = "xiangxi.html?valus=" + that;//带值跳转到详细页面
},//详细页面接收到数据并获取
var id;
var url = window.location.search; //获取url中"?"符后的字串
if (url.indexOf("?") != -1) {
id = url.substr(url.indexOf("=") + 1);
}这样就可以拿到某件商品的id，从后端精确拿到数据进行渲染。
(3) Ajax获取Map集合
如：'华为手机'(键):2999（值）
那么Ajax里面的success应该这么写：
success : function(result) {
var Data=result.data;
for(var key in Data) {
console.log("键:"+key+"值:"+Data[key])
}
},得到的样式：
(4) window.onload
这个有点坑，只能用一次或者不用，出现多个会出现奇奇怪怪的问题...
(5) 销售量和销售额的切换
如图:
<div class="ph-top" >
<span>商品销售排行</span>
<button class="xl" @click="qiehuan2" :class="{x:checked}">销售额</button>
<button class="xe" @click="qiehuan1" :class="{x:ischecked}">销售量</button>
</div>设置两个变量进行控制x这个class类，加上x则按钮变色
data: {
goods: [],
checked: false,
ischecked: true
},通过鼠标点击事件切换按钮和信息，发起Ajax请求
qiehuan1() {
//销售量
var token = localStorage.getItem('token');
this.ischecked = true;
this.checked = false;
var self = this;
$.ajax({
type: "post",
url: "http://localhost:9000/sales/getInfoList",
headers: { 'token': token },
dataType: "json",
data: {},
success: function (result) {
//console.log(result)
self.goods = [];
$.each(result.data, function (i, item) {
self.goods.push({
name: i,
value: item
})
})
},
error: function () { }
})
},根据ischecked的状态修改下方销售量/销售额
<th class="p4" v-html="ischecked? '销售量' :'销售额' ">
{{ischecked}}
</th>(6) 新学到一个插件库，分享一下。
https://echarts.apache.org/handbook/zh/get-started/
(7) created里面this的指向问题
如果在success里面用this，报错找不到goods。
原本的理解是这里的this指向Vue对象，但是这里的this指向的是window对象，所以在window对象下找不到goods而报错。
解决方法很简单，把指向Vue对象保存给一个变量self，后面引用self修改数据即可。
(8) vue的生命周期
Vue实例的产生过程
① beforeCreate在实例初始化之后,数据观测和事件配置之前被调用。
② created在实例创建完成后被立即调用。
③ beforeMount在挂载开始之前被调用。
④ mounted el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。
⑤ beforeUpdate数据更新时调用,发生在虚拟DOM打补丁之前。
⑥ updated由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
⑦ beforeDestroy实例销毁之前调用。
⑧ destroyed实例销毁后调用。
详见大佬的文章：超详细vue生命周期解析(详解)_ら陈佚晨的博客-CSDN博客_vue生命周期
（当前阶段，包括懒人电商项目我用的最多，也是最熟悉的就是created，其他过程仅了解不太会用，以后用到再仔细学一下吧）