一篇持续更新的干货贴♪（＾∀＾●）ﾉｼ
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要精简一些。记录下来，避免重复爬坑。
十一、iphone7弹出层的输入框光标下移bug
将body的position设置为fixed
十二、mac下的mysql配置
1、下载地址：https://dev.mysql.com/downloads/mysql/
2、安装
3、Path配置(关键，确保可以在全局直接使用mysql)
编辑或创建并编辑.bash_profile文件
vim ~/.bash_profile
在其中写入命令（使环境添加mysql所在路径）
PATH=$PATH:/usr/local/mysql/bin
按esc后输入：wq保存本次编辑后，读取并执行.bash_profile中的命令（即添加mysql的环境）
source ~/.bash_profile
4、键入命令行连接数据库，如果环境配置没有问题则以下命令可以运行在任何一个目录内
mysql -u root -p
5、关于数据库创建和增删改查既可以使用命令行页可以使用图形化界面，使用图形化界面的话推荐Sequel Pro一个免费且好用的工具。使用方式网上很多不多余赘述，下面记录命令行方式。
6、创建数据库
Create database test;
注意：语句后面的分号是至关重要的，不添加分号直接回车会认为语句没有写完
关于命令行的使用描述如下：
List of all MySQL commands:
Note that all text commands must be first on line and end with ';'
? (\?) Synonym for `help'.
clear (\c) Clear the current input statement.
connect (\r) Reconnect to the server. Optional arguments are db and host.
delimiter (\d) Set statement delimiter.
edit (\e) Edit command with $EDITOR.
ego (\G) Send command to mysql server, display result vertically.
exit (\q) Exit mysql. Same as quit.
go (\g) Send command to mysql server.
help (\h) Display this help.
nopager (\n) Disable pager, print to stdout.
notee (\t) Don't write into outfile.
pager (\P) Set PAGER [to_pager]. Print the query results via PAGER.
print (\p) Print current command.
prompt (\R) Change your mysql prompt.
quit (\q) Quit mysql.
rehash (\#) Rebuild completion hash.
source (\.) Execute an SQL script file. Takes a file name as an argument.
status (\s) Get status information from the server.
system (\!) Execute a system shell command.
tee (\T) Set outfile [to_outfile]. Append everything into given outfile.
use (\u) Use another database. Takes database name as argument.
charset (\C) Switch to another charset. Might be needed for processing binlog with multi-byte charsets.
warnings (\W) Show warnings after every statement.
nowarning (\w) Don't show warnings after every statement.
resetconnection(\x) Clean session context.
也就是除了上述的快捷方式的命令行以外，其他如Create、show之类的文本命令都必须以’,'结尾
7、陈列已有数据库
show databases;
8、连接到数据库，如连接到test 则use test
use databaseName
9、对表的各项操作使用的是通用的SQL语句，以下以创建表为例举例
CREATE TABLE table_name (column_name column_type);
例如：
CREATE TABLE user(
uid varchar(20) NOT NULL PRIMARY KEY,
record varchar(10)
);
关于SQL具体语法，有许多权威教程，此处不多余赘述。贴一个SQL语法教程，个人感觉很通俗易懂W3Shool的教程
http://www.w3school.com.cn/sql/sql_create_table.asp
关于表和数据库的各项操作都有详细描述。
以上。
十三：子元素fixed失效问题：
当父元素使用transform时，子元素的fixed会相对父元素进行定位而非浏览器。需要将transfrom去掉进行解决，目前没有很好的解决方案。
关于transform对元素的影响效果，参考：https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/