1、问题描述：一个盒子里有两个行内块元素，第一个盒子设置了margin-top，第二个没有设置，为什么第二个也会下沉？
运行结果：
因为行内块元素的默认对齐方式是和基线对齐，不是和底部对齐，即默认vertical-align:baseline。
解决办法：
1、给第二个盒子加上：vertical-align:top/center/…
ps:两个盒子中间有间隔问题：给父盒子设置font-size: 0;
2、导航栏会因为浏览器页面的缩小而导致部分元素被挤下来的问题
解决方案：被挤下来是因为导航栏的宽度不够，给盒子设置最小宽度即可。
min-width 当盒子内部元素宽度小于min-width的值时，盒子的宽度为min-width的值，当盒子内容宽度大于min-width的值时，盒子的宽度随着内容的增加而被撑大，没有上限。
3、如果导航栏分为左中右三部分，左右的宽度不一样，怎么使中间部分相对于页面居中
解决方案：1、给左右的盒子设置justify-content:space-between 使盒子位于左右两侧，然后重新定义一个盒子（导航栏中间部分的盒子），背景色为透明，利用margin将透明盒子覆盖到导航栏上即可。
2、
<style>
.box {
display: flex;
width: 100%;
height: 30px;
justify-content: space-between;
}
.left {
display: flex;
text-align: left;
width: 40%;
height: 30px;
background-color: pink;
}
.center {
display: flex;
width: 60%;
height: 30px;
align-items: center;
justify-content: center;
text-align: center;
background-color: green;
vertical-align: top;
}
.right {
display: flex;
width: 40%;
justify-content: flex-end;
width: 40%;
width: 500px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
3、 line-height可以应用于哪些元素
line-height只影响行内元素，并不能直接应用于块级元素line-height具有可继承性，块级元素的子元素会继承该特性，并且在行内元素上生效
4、深度选择器
在开发时遇到一个问题，就是vue项目和element ui结合使用，但是element ui中有的样式不符合我们的需求，这时我们就要修改它的样式，需要使用到深度选择器。
解决方案：
1、style为css时，使用 >>>
2、style为css的预处理器（less,sass,scss）时，可以使用/deep/和::v-deep
<style lang="css">
>>> .active{
}
</style>
<style lang="scss">
/deep/ .active{
}
::v-deep .active{
}
</style>
5、v-for不能用在根元素上
v-for不能用在根元素上，因为v-for会循环根元素，而vue里根元素只能有一个
6、vuex使用模块的时候，获取state里的数据语法
1、
this.$store.state.数据名
2、
this.$store.state.哪个模块.数据名
ps:vue组件使用vuex中的方法有时会报unknown mutation type的错误，如果vuex分为几个模块，方法在模块中的话，如果直接在通过this.$store.commit（‘方法名’）是获取不到的，必须加上模块名，例：this. $store.commit(“模块名/方法名”)
7、登录拦截设置白名单
设置了白名单之后，如果没有登录，则不需要登录之后跳转，可以直接跳转
const whiteList = ['/login', '/forgetPwd', '/register'];
else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// 在免登录白名单，直接进入
next();
} else {
next(`/login?redirect=${
to.fullPath}`); // 否则全部重定向到登录页
NProgress.done();
}
}
8、validate.js验证表单
我们在写项目时，在登录模块经常会遇到要检验邮箱格式是否正确，手机号格式是否正确等问题，这时就要使用validate来验证了
1、项目在validate.js中一般会包括对邮箱等内容的验证方法
// 验证邮箱
export function validEmail(email) {
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}
2、在需要验证的页面引入验证邮箱格式的方法
import {
validEmail } from '@/utils/validate';
3、在data中定义一个常量
const verifyEmail = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入邮箱'));
} else if (!validEmail(value)) {
callback(new Error('请输入正确的邮箱'));
} else {
callback();
}
};
4、在对表单的验证规则中加入刚刚的常量
username: [{
required: true, trigger: 'blur', validator: verifyEmail }]
9、< h>和< p>标签自带边距，使用时需要先清零
10、路由传参
this.$router.replace({
// 需要跳转的路径
path: 'resetPwd',
// 要传入的参数
query: {
email: this.username
}
})
11、密码加密
// 加密
export function encrypt(txt) {
const encryptor = new JSEncrypt();
encryptor.setPublicKey(publicKey); // 设置公钥
return encryptor.encrypt(txt); // 对需要加密的数据进行加密
}
1、导入
import {
encrypt } from '@/utils/rsaEncrypt';
2、使用
password: encrypt(password)
12、axios的请求
在创建请求时的配置选项中，只有url是必需的。如果没有指定method，则请求默认使用get方法。
关于axios的请求传参总结：请求传参总结
13、cookies的操作
设置cookie
Cookies.set(keyName,newName)
获取cookie
Cookies.get(keyName)
删除cookie
Cookies.remove(keyName)
14、 watch监听
1、可对input输入框、数组、对象、对象的具体属性进行监听
<template>
<div>
<input type="text" v-model="message">
</div>
</template>
<script>
export default ({
data() {
return {
message:"星期六"
}
},
watch:{
message:{
handler(newVal,oldVal){
console.log("新值",newVal);
console.log("旧值",oldVal);
}
}
}
})
</script>
2、watch监听路由
watch:{
//to是将要进入的路由信息，from是当前页面的路由信息
$route:{
handler(to, from){
//to.path即为将要进入的路由
if(to.path == "/xxx"){
//操作
}
}
}
},
15、模板字符串
ES6引入了新的声明字符串的方式，即反引号``
1、内容可以实现直接换行
console.log(`123
456
789`);
2、变量拼接，不再使用+进行拼接，而是采用`` 这个符号包围字符串和变量，需要用${}包裹着变量，字符串不用处理
console.log(`${
this.sex}22clean`);
16、 Vue.js中的ref（$refs）的用法举例
1、ref加在普通元素上，用this.$refs.name获取的是dom元素
h5部分
<div>
<h5 ref='nihao'>你好,我是xxx</h5>
</div>
js部分
mounted() {
console.log(this.$refs.nihao)
}
结果
2、ref加在子组件上，用this.$refs.name获取的是组件实例，可以调用组件的所有方法
子组件部分
<div class="hello">
<h1>Welcome to Your Vue.js App</h1>
</div>
methods:{
helloVue(){
console.log("hellovue");
}
}
父组件部分
<HelloWorld ref="hello"/>
created(){
this.$nextTick(() => {
//调用组件的helloVue方法
this.$refs.hello.helloVue();
})
}
3、利用v-for和ref获取一组数组
h5部分
<ul>
<li v-for="(item,index) in number" :key="index" ref="num">{
{
item}}</li>
</ul>
js部分
created(){
this.$nextTick(() => {
console.log(this.$refs.num);
})
}
结果
ps:ref本身是作为渲染结果被创建的，在dom元素渲染完成之后才有，在使用的时候需要确保dom元素已经渲染完成，比如在生命周期mounted中调用，或者在this.$nextick(() =>{})中调用
17、Vue中this.$nextTick（）的用法
this.$nextTick 将回调延迟到下次DOM更新循环之后执行。
18、setTimeout()和setInterval()的用法
setTimeout()是在载入之后延迟指定时间之后执行一次表达式。
setTimeout(() => {
console.log("300ms之后执行");
}, 300);
setInterval()是在载入之后每隔指定时间就执行一次表达式。
var timeId = setInterval(() => {
console.log("每隔300ms执行一次");
}, 300);
清除定时器
clearInterval(timeId)
19、css3自适应布局单位vh,vw
视口：在PC端，视口指浏览器的可视区域
1vw:等于视口宽度的1%
1vh:等于视口高度的1%
20、将小数转化为百分比的形式
//例：参数为0.556，输入结果为55.600%
toPercent(point) {
var str = Number(point * 100).toFixed(3)
str += '%'
return str
}