1，
1)移动端拖拽vue-draggable
http://www.itxst.com/vue-draggable/n6rzmqj3.html
2)Vue拖拽组件awe-dnd 使用v-dragging
npm install awe-dnd --save
main.js中注册
import VueDND from 'awe-dnd';
// 注册-拖拽组件
Vue.use(VueDND);
使用
v-dragging="{ item: item, list: colorList, group: 'item' }"
3)sortable
http://www.sortablejs.com/options.html#
2，移动端手势库 hammer.js
https://www.cnblogs.com/vajoy/p/4011723.html?utm_source=tuicool#api1
3, JS判断两个时间戳是否为同一天
new Date().toDateString()
4,element-ui 输入框el-input 输入长度限制组件不生效
可能你项目下载安装的element-ui版本和你看的官方文档版本不一样，
element-ui ,输入框el-input长度限制这个组件是最新版本2.8.2才有的
5，css 超过2行 省略，...的形式展示的问题
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
6, el-input获取焦点时样式改变 :focus伪类
&:focus{
background: #fff;
}
7, element-ui中el-input需要改变placeholder的字体颜色
input::-webkit-input-placeholder {
color: #c0c4cc;
}
input::-moz-input-placeholder {
color: #c0c4cc;
}
input::-ms-input-placeholder {
color: #c0c4cc;
}
8，element ui中的input组件 show-word-limit 不生效
版本过低，这个功能在版本为2.8.2才有的
9，Git基于一个分支创建新分支
1）切换至需要克隆的分支git checkout release
2）拉取该分支最新的代码（当然，拉取之前最好本地的仓库环境是干净的，该提交的提交，该stash的stash）git pull release
3）基于release分支克隆出新的本地分支issue66git checkout -b issue66
10, 查看分支
1)查看本地仓库的分支
git branch
2)查看本地和远程仓库的所有分支
git branch -a
3)查看远程仓库的分支
git branch -r
11,查看stash list
1)所有的stash
git stash list
2)查看某个stash具体内容
git stash show -p stash{1}
12，复制粘贴库clipboardjs
http://www.clipboardjs.cn/
13,v-text和插值表达式{{ }}的区别
v-text会覆盖元素中原本的内容，插值表达式{{ }}只会替换自己的这个占位符，不会把整个元素内容替换。
123 //hello
{{text}}123 //hello123
14,设置input和textarea光标颜色
caret-color: #FA0560;
15,vue 关于input和textarea自动聚焦问题
this.$refs.focusTextarea.focus();
ios光标在文字最前面，安卓正常，在文字最后面，所以需要聚焦后从新赋值
this.newMessage = sessionStorage.getItem('value') ? sessionStorage.getItem('value') : '';
16，element.getBoundingClientRect() 获取元素相对于视窗的距离
element.getBoundingClientRect().top
element.getBoundingClientRect().left
element.getBoundingClientRect().bottom
element.getBoundingClientRect().right
适用于场景： 吸顶效果
$(window).scroll(function () {
var obj = document.getElementById(target.slice(1)).getBoundingClientRect();
if (obj.top - $(this.element).height() < 0 && obj.bottom - $(this.element).height() > 0) {
$(element).css(fixed)
$(element).css("width",$(element).parent().width()+"px")
} else {
$(element).css(none)
}
});
17, div中纯文字居中
单行： line-height
多行： display: table-cell; vertical-align: middle
18, 移动端web禁止长按出现菜单
方法一： css
{
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
方法二： js
node.addEventListener('contextmenu', function(e){
e.preventDefault();
});
oncontextmenu 右击鼠标事件
阻止默认右键 @contextmenu.prevent
点击其他地方，关闭右键菜单
mounted(){
// 监听body上的点击
document.querySelector("body").addEventListener("click",this.closeMenu)
},
beforeDestroy(){
// 移除监听
document.querySelector("body").removeEventListener("click",this.closeMenu)
}
19,
white-space 元素内空白如何处理
nomal : 默认，空白被浏览器忽略
nowrap: 不换行，直到遇到br标签才换行
pre-wrap: 保留空白符序列，但是正常地进行换行
pre-line: 合并空白符序列，但是保留换行符。
20，
已知div宽高，内部img垂直水平居中
1）
div {
width: 300px;
height: 300px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 高度的一半 */
margin-left: -50px; /* 宽度的一半 */
}
未知宽高，img在div内垂直水平居中
.box{
width: 800px;
height: 600px;
text-align:center;
}
span {
display:inline-block;
height:100%;
vertical-align: middle;
}
img {
vertical-align:middle;
}
21, find，findeIndex，filter
find
const myArr = [1,2,3,4,5,6];
var v = myArr.find((value, index, arr) => {value > 4});
console.log(v);//5
myArr不变，未找到会输出undefind
findIndex和find使用方法一样，返回序号，若没找到，返回-1
filter返回的是数组。所有符合条件的数组
数组去重
var myArr = [1,3,4,5,6,3,7,4];
console.log(myArr.filter((value, index, arr) => arr.findIndex(value) === index)); //[1, 3, 4, 5, 6, 7]
22，
animation 动画停在最后一帧
animation-fill-mode: forwards
23,
div和img垂直排列的时候会有一个缝隙。解决办法：
img的display: block
24，
css3的hsla()属性。
hue: 0红色，120绿色， 240蓝色
saturation饱和度： 0灰色-100%全色
lightness亮度： 0:暗-50%正常，100%白色
alpha透明度
25，
css文本超出隐藏显示省略号
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
26，div中input垂直居中
display: table;
display: table-cell
27, 实现如图布局，父元素高度由内容撑开，内容高度不定，
ss
mm
dddddddd
ddddd
ddddd
.wrap {
display: flex;
background: pink;
align-items: flex-end;
}
span {
margin-left: 10px;
}
.end {
display: flex;
align-items: center;
}
27,
text-decoration:
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
28，
移动端click 300ms延迟问题
fastclick：
1）npm install fastclick -S
2）在main.js中引入，并绑定到body
import FastClick from 'fastclick'
FastClick.attach(document.body);
⚠️ 不需要加fastclick元素的class上可以加needsclick class="needsclick"
29，
中文文件名编码乱码,git默认配置下中文文件名显示为八进制编码。需要更改下配置：
git config --global core.quotepath false
30，
快速关联远程仓库新地址
git remote //查看远程仓库名称：origin
git remote get-url origin //查看远程仓库地址
git remote set-url origin https://github.com/developers-youcong/Metronic_Template.git ( 如果未设置ssh-key，此处仓库地址为 http://... 开头
31,
删除远程分支
git push origin --delete [branch_name]
删除本地分支
git branch -d [branch_name]
32,
git中避免提交.DS_Store文件
1）创建.gitignore文件
2）vi .gitignore,然后添加.DS_Store作为忽略 .DS_Store
3）提交
git add . /commit /push
33,
pointer-events: none： 元素看得见但是摸不着。
display: none： 元素看不见也摸不着
34，
ios上只有用户交互触发的focus事件才会起效，而延时回调的focus是不会触发的，说得大佬粗点，你想在ios上focus事件起效就不能讲focus时间放在延时里面调用
35，
Ant design添加其他参数, param;默认参数是value
36，
safari浏览器new date()兼容问题
在做移动端开发时，ios设备上new date（）再格式化出现了NaN现象
经过了解，是因为低版本的safari浏览器对new Date(str)有严格校验，对于诸如2017-08-30 10:23:22 这样形式的字符串是不支持的。后来使用replace(/-/g,”/”)将时间字符串转换为2017/08/30 10:23:22解决了问题
37，
keep-alive从别的页面跳回来，element 走马灯不播放问题。其实keep-alive缓存组件的是created钩子会创建一个cache对象，用来作为缓存容器，保存vnode节点。destroyed钩子则在组件被销毁的时候清除cache缓存中的所有组件实例。
猜想，可能是显示的页面可能只是vnode节点，还没有渲染出html标签就执行了new了swiper实例，导致swiper的实例无法挂在到实际的html元素上，所以出现轮播无法播放的问题。
解决：
页面用 v-if="isShow" 控制
activated() {
this.isShow = true;
}
deactivated() {
this.isShow = false;
}
38，