如何优雅的记录编程中遇到的问题

一篇持续更新的干货贴♪（＾∀＾●）ﾉｼ

1. 解决div中文字和图片水平对齐问题

当div同时出现img和span，会出现图片高于文字的现象，用以下三种方法可以解决这个问题。

1、第一种方法是使用vertical-align: middle

首先设置图片和文字的vertical-align: middle这个时候要注意，如果图片大小和文字大小不一样，比如20px的图片和16px的字，一定要设置文字的line-height属性。代码如下：

<li class="item">
<img src="../../assets/msg.png"/>
<span>消息</span>
</li>

css代码如下

.item span {
vertical-align: middle;
display: inline-block;
height: 24px;
line-height: 24px;
font-size: 16px;
}
.item img{
width: 24px;
height: 24px;
vertical-align: middle;
}

未设置vertical-align时，img将高于文字



都设置vertical-align，但未设置line-height时，文字将与图片的顶端对齐，此时文字是不居中的。



设置line-height后文字将于图片水平对齐。



2、第二种方法是将图片设置为文字的背景

<div>图片将会出现在文字的右侧</div>
.search{
background: url("./search.png") no-repeat left;
background-size: 18px 18px;
}

3、第三种方法是给img和图片均设置display：inline-block然后通过margin和height设置达到水平对齐的效果，但是不建议使用此方法。会让布局看起来非常混乱，不易维护。

2. 如何在vue中实现textarea的剩余字数显示（v-model实现双向绑定的原理）

<div class="item" id="text">
<label>简述：</label>
<textarea maxlength="300" v-model="text"  ></textarea>
</div>

<div id="icount">
<p id="spann">您还可以输入{{wordc}}字</p>
</div>

以下是script部分代码

data () {
return {
text: '',
wordc: '300'
}
},
methods: {
mycou: function (event) {
var a = this.text.length
this.wordc = 300 - a
}
}

效果图



知识点：

首先来看看v-model的官方文档



也就是v-modle实际为语法糖。v-model=”something”则表示将value值绑定在something上，当值发生改变时触发绑定的input事件。input事件绑定的函数是将更改后的value值覆盖原value值。所以：

something即是实时的value值，每一次value值得更改都会触发something改变

如果有别的控件绑定something那么input的value值改变改控件的值显示，因此实现了双向绑定

3、 为何vue的大型项目中data需要使用return返回数据呢？

知识点：不使用return包裹的数据会在项目的全局可见，会造成变量污染

4、css样式的覆盖规则

css样式明明检查没什么问题却显示不出来多半是（装的，删了重写就好）因为被其他样式覆盖了，只要提高优先级就可以解决。

知识点：

在为元素定义样式时常会发生样式冲突的情况。那么此时应该以什么为标准进行样式选择呢？

1、由于继承而发生样式冲突时，最近祖先获胜，而指定样式优先级高于继承样式的优先级。

2、直接指定的样式发生冲突时，优先级按照指定方式优先级如下排序：

内联样式的权值>>ID选择器>>类选择器>>标签选择器。后代选择器的权值为每项权值之和。

3、样式权值相同时，后者获胜。

4、样式表文件越靠后，优先级越高。

5、!important的样式属性不被覆盖。

5、如何在vue当中实现遮罩层

<button @click="upda">显示遮罩层</button>
<div id="zzc" v-show="info"></div>

script代码：

upda: function (event) {
this.info = true
}

css代码：

#zzc{
position: absolute;
top: 0px;
z-index: 200;
width:100%;
height: 1200px;
background: #000;
opacity: 0.4;
filter:alpha(Opacity=10);
}

知识点：

Z-index 仅能在定位元素上奏效。因此必须设置position否则不会出现层叠效果。

6、如何正确获取Promise Object

用Sequelize类获取的数据是Promise Object是无法直接操作的。此时应在方法前加await

var userdata = await user.get(name);
var uname = userdata[0].name;
var upsd = userdata[0].psd;

如果不加await将会出现undefinde报错

7、为什么setTimeout（0）会延迟执行

这里涉及到javascript单线程执行的问题：javascript在浏览器中是单线程执行的，必须在完成当前任务后才执行队列中的下一个任务。

另外，对于javascript还维护着一个setTimeout队列，未执行的setTimeout任务就按出现的顺序放到setTimeout队列，等待普通的任务队列中的任务执行完才开始按顺序执行积累在setTimeout中的任务。

8、在不知道子元素高度情况下的垂直居中

.main{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}

9、忘记密码情况下的密码重置

第一步： 点击系统偏好设置->最下边点MySQL，在弹出页面中，关闭服务

第二步： 进入终端输入：cd /usr/local/mysql/bin/ 回车后 登录管理员权限 sudo su 回车后输入以下命令来禁止mysql验证功能 ./mysqld_safe –skip-grant-tables & 回车后mysql会自动重启（偏好设置中mysql的状态会变成running）

第三步： 输入命令 ./mysql 回车后，输入命令 FLUSH PRIVILEGES; 回车后，输入命令 SET PASSWORD FOR ‘root’@’localhost’ = PASSWORD(‘你的新密码’);

10、用vue实现导航栏下划线切换。效果如csdn首页导航栏的下划线切换

template部分如下：

<ul class="nav">
<li v-for="(item,index) in navlist" :class="{active:!(index-menuIndex)}" :key="item" @click='menuShow(index)' ><a href="#"  v-text="item" ></a></li>
</ul>

script部分如下：

data () {
return {
menuIndex: -1,
navlist: ['推荐', '资讯', '人工智能', '程序人生'],
}
},
methods: {
menuShow: function (index) {
this.menuIndex = index
}
}

觉得vue当中应该尽量避免dom操作就尝试不直接操作dom去解决，发现代码比写dom要精简一些。记录下来，避免重复爬坑。