前端个人笔记

1.vue项目安装依赖/插件时忘记–save，再次install出问题并且没有报错。

安装新依赖/插件时忘记–save，下次install的时候有可能会报错（XX not found），按照错误信息重新安装依赖即可；如果没有报错就麻烦了，比如样式问题，怎么才能知道之前安装过什么依赖？
目前我的一个办法是把以前的node_modules粘过去，运行时就会报错误信息，按照提示安装即可。若之前的node_modules无了，就不知道了。

2.margin移动元素不显示背景色

由于被relative元素遮挡，需要把被遮挡元素设置position:relative;

3.新知识：@media 条件样式

按照不同条件使用不同css样式。

  // 注意从小到大写
  @media (min-width: 1200px) {
    .integration-body {
      width: @integration-1200px-body-width;
    }
  }
  @media (min-width: 1600px) {
    .integration-body {
      width: @integration-1600px-body-width;
    }
  }

4.入坑：row和col不能分离，span=24不能不写

一开始都是可以的，到后面重新下载依赖后就出现了这两个问题。

5.聚焦实现滚动到指定元素

给元素添加 draggable=true 属性 以实现可拖拽。
outline: none 除去聚焦后的框。 对于默认没有聚焦的元素需要主动添加属性：tabindex=“222” 需唯一。
添加父元素：

var child = document.getElementById("child");//  获取子元素
var parent = document.createElement('parent');//  新建父元素
parent.className = 'parent';
child.parentNode.replaceChild(parent,child);//  获取子元素原来的父元素并将新父元素代替子元素
parent.appendChild(child);//  在新父元素下添加原来的子元素

也可使用scrollTo 实现滚动到指定元素，效果比focus好
wrapper.scrollTo(0,document.getElementById(‘xxx’).offsetTop); （竖向）
wrapper.scrollTo(document.getElementById(‘xxx’).offsetLeft,0); （横向）

以下是封装的v-frag指令供参考
自定义v-drag指令（横向拖拽滚动）