总结一下在学习前端编程时遇到的坑(html.css3.js.jquery.vue.sass....

HTML

1、a标签连接之间有缝隙

描述：习惯写法，导致每个标签有默认缝隙，难以调整css样式：

<a href="##">首页<a/>
<a href="##">段子<a/>
<a href="##">图片<a/>

解决办法：
1、改写成下面的样子：

<a href="##">首页<a/><a href="##">段子<a/><a href="##">图片<a/>
//标签中间不要换行，a标签一个挨着一个书写，直到它们自动换行，这样问题就解决了。

2、给外层div加属性限制
给a标签外层div设置margin-left:-8px即可解决，-8不是个特定值，具体多大根据每个人的情况来定，这样设置的好处就是即使负值设置的足够大，a标签之间也不会发生重叠，这是非常好的，这个负值可以稍微大点。
3、给外层div设置字符间距和单词间距

---

2、button标签

使用button标签，一定要加上type="button"属性，因为在不同浏览器对button的默认样式不一样，为了避免这样的情况，加上type就好了。

---

CSS

1、让容器内的文字左右均匀分布

解决：使用flex布局，把容器内每个文字当成一个元素；

display:flex;
justify-content:space-between;

---

2、有时候修改了css样式，刷新页面并没有改变

解决：使用shift+F5深度刷新即可。

---

3、CSS3中使用属性选择器设置公共样式的一个方法

 [class*="-active"] .dropdown-arrow{
         -0-transform:rotate(180deg);
         -ms-transform:rotate(180deg);
         -moz-transform:rotate(180deg);
         -webkit-transform:rotate(180deg);
         transform:rotate(180deg);
    }

这样就可以找到文档中所有包含-active的class属性，然后在这个属性下找到arrow属性，给arrow属性添加旋转效果，这样就算下拉菜单有多种激活状态，例如car-active，menu-active，都能同时设置到，不用单独再设置。

---

4、css设置文字单行溢出编程省略号方法

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

---

5、在使用css3的transition时候，没有动画

解决：使用setTimeout改成异步。

---

6、chrome浏览器去掉type为number的上下按键的方式。

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
    -webkit-apperance:none;
    margin:0;
}

---

JavaScript

1、获取页面滚动高度scrollTop的时候高度总是0.

原因：这是由于浏览器兼容性问题造成的。
解决：
IE6/7/8： document.documentElement.scrollTop；
IE9及以上：可以使用window.pageYOffset或者document.documentElement.scrollTop ；
Safari: window.pageYOffset 与document.body.scrollTop都可以；
Firefox: 直接用window.pageYOffset 或者 document.documentElement.scrollTop ；
Chrome：document.body.scrollTop;

---

2、代码瘦身的方法.

解决：将一些方法里面公用的代码提取出来封装在一个函数内，差异的地方通过传入回调函数的方法实现。

//小A
var a = function {
    this.sex = 'male';
    this.age = 18;
    this.name = 'xiaoming';
};

//小B
var b = function {
    this.sex = 'male';
    this.age = 18;
    this.name = 'xiaohua';
};
//就可以改写成：
function setmsg(elem,callback){
    elem.sex = 'male';
    elem.age = 18;
    if(typeof callback === 'function' ) callback();
}
//小A
var a = function {
   setmsg( this,function(){
         this.name = 'xiaoming';
    } );
};

//小B
var b = function {
     setmsg( this,function(){
         this.name = 'xiaohua';
    } );
};

---

3、this指向问题

描述：在构造函数，对象，普通函数的使用中，经常遇到this指向的问题。
解决：1、使用es6的箭头函数；2、手动保存一下this的指向。

---

4、click事件和blur事件冲突问题.

blur事件是失去焦点触发，当鼠标按下还未松开，输入框就已经判定失去焦点触发了blur；
click事件需要鼠标按下再松开才触发，所以数去焦点在前，有时候就会干扰倒click事件触发。

---

5、限制input框type为number输入长度问题.

描述：type为number时，maxlength和minlength是无效的，就算设置了，用户也可以输入超过这个长度的值，如果要像text那样实现超过指定长度就无法输入，需要用到js来控制，

<input type="number" name="" id="number" oninput="checkLength(this,5)">
function checkLenght(obj,length){
    if(obj.value.length > length){
        obj.length = obj.value.substr(0,length);
    }
}

---

6、将类数组转化成数组.

const lickarr = document.querySelectorAll('option');
console.log(lickarr instanceof Array);  //false
const arr2 = Array.prototype.slice.call(lickarr);
console.log(arr2 instanceof Array);  //true

---

7、在指定位置插入html或text方法.

insertAdjacentHTML和 insertAdjacentText方法(参数类似)：
原型：insertAdjacentHTML(swhere,stext)
demo.insertAdajcentHTML(‘beforeBegin’,stext)
参数：
swhere: 指定插入html标签语句的地方，
stext:要插入的内容
有四种值可用：

1. beforeBegin: 插入到标签开始前
   

2. afterBegin:插入到标签开始标记之后
   

3. beforeEnd:插入到标签结束标记前
   

4. afterEnd:插入到标签结束标记后
   

---

Jquery

1、事件代理方法

 $layer.on('click', '.search-layer-item', function() {   //利用冒泡特性，实现事件代理
        //也是使用jquery的on方法，给他们的共同父类绑定事件，第一个参数是事件名；第二个参数是要代理谁(即期望谁触发事件)；
        //第三个参数是执行什么事情
        //并不是所有事件都能被代理，能被代理的关键是能够冒泡(focus,blur就不能使用事件代理)
        $input.val(removeHtmlTags($(this).html()));
        $form.submit();
    })

---

2、计算屏幕可视区高度和滚动高度,元素顶部距离页面顶部的距离的方法

var $win = $(window);
var $elem = $(’.demo’)；
$win.height();就是可视区的高度。
$win.scrollTop();就是滚动的高度。
$elem.offset().top;就是元素顶部到页面顶部的距离。

---

VUE

---

1、启动vue项目失败问题

解决：如果有时候代码没问题，但是打不开。可以在项目根目录安装依赖 npm install
后重新安装第三方库
然后修复一下代码 npm run lint – --fix
最后运行 npm run dev

---

2、使用vue脚手架创建一个vue项目

1、全局安装vue-cli 命令行：npm install --g vue-cli
2、创建一个基于weibpack模板的新项目
vue init webpack my-project
3、安装依赖包
cd my-project
npm install
npm run dev //运行项目

---

3、使用px2rem-loader

除了sublime的cssrem外的另一种使用rem的方法。

可以直接在代码中使用px，编译后会自动转化为rem；
如果某个样式不需要转化陈rem，那么在最后加 /no/即可；
width: 20px;
height: 40px; /no/

使用方式：
1、用git 或cmd 安装 $ cnpm install px2rem-loader 回车安装好即可

2、在项目的build文件夹中找到 utils.js文件

定义一个变量：

 var px2remLoader = {
     loader: 'px2rem-loader',
     options: {
       remUnit: 50  //1rem= 50px 的意思 
     }
  };

找到 generateLoaders 函数 将变量放到该位置即可使用

  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

---

4、使用第三方库 axios从服务端获取数据

安装第三方库 axios
cnpm install --save axios

 //引入获取数据的axios
    import axios from 'axios';

    //定义个方法获取数据 axios就是个promise异步操作
    //res就是获取到的数据
    export const getHomeSlider = () => {
           return axios.get('http://www.imooc.com/api/home/slider')
    .then(res => {
         consele.log(res)
         })
    }

//在需要调用数据的页面引入
import {getHomeSlider} from 'api/home';

//然后在
create（）{
    this.getSliders();
}//方法中调用(一般都在create中获取数据)

//在methods类中定义方法
methods: {
      getSliders() {
        return getHomeSlider().then(data => {
          this.sliders = data;
        });
      }
    }

---