2018-04-09

1. 问题:
   在body中引入'\5170\4EAD\7C97\9ED1 GBK_1'这个字体，li中有元素带有float属性时，内容会进行梯次排列,很诡异。。。
   解决办法:
   添加固定高度
2. vue中的事件委托
   问题:
   无论用vue还是jq,做后台系统的项目,基本上都会用到给ul中的每个li添加事件的情况,如果用<li v-for="(item,index) in items" :key="index" @click="doSomethings">这种方式去分别添加事件虽然能解决一部分问题，但无论从代码美观角度还是从性能考虑，都是不好的
   解决办法:
   如果使用jq或者原生js，自然就想到了事件委托来做，但在大火的vue中该如何做呢？

    <ul class="list-box" @click="jump">
        <li v-for="(item,index) in teamData" :key="index" :data-index="index" :data-link="item.url">
            <div>
                <img :src="item.imgUrl" :alt="item.title">
            </div>
            <div>   
                <h4>{{item.title}}</h4>
                <span>{{item.time}}</span>
                <p>{{item.content}}</p>
            </div>
        </li>         
    </ul>
    <script>
        export default({
            methods: {
                jump(e){
                    const curEle = e.target.parentNode.parentNode;
                    const url = curEle.dataset.link;
                    if(curEle.tagName.toLowerCase() == 'li'){
                        window.location.href = url
                    }
                    "在这里可以进行各种DOM操作，switch判断（实际需求中有相对复杂的结构的时候）"
                  }
            }
        })
    </script>

3. 问题：vue-cli中GZIP压缩，如果用户的浏览器支持压缩就发送压缩的相应内容，如果不支持就发没压缩的响应内容，一般的现代浏览器都支持来的；
   解决办法：

找到vue-cli中config/index.js文件，将build对象中的productionGzip设置为true就可以了，依据不同的情况，经个人测试，差不多都是压缩到30%起的