使用VUE仿写【E宠商城】踩坑点

使用VUE仿写【E宠商城】踩坑点

1、无论是否是否写了！important 父元素的规则 都是被子元素继承的 继承的样式优先级小 所以这边的字体大小还是保留reset那边的样式！！！


2、canvas的宽度必须设在标签中，不能设在样式中，否则会被默认拉伸（也不能canvas.style.width去设置！！！）


3、transform: translateX(-34px) translateY(-34px) rotateZ(720deg);不能分开写，分开写会覆盖掉上次的 不管是X还是Y 只要是transform都会覆盖


4、父元素没有高度但设置了绝对定位 子元素也定位了，但是top无法生效，因为绝对定位是参照父元素的位置的，而父元素却没有高度，无法确定位置


5、background: url(../img/music.png) no-repeat;而非background-image: url(../img/music.png) no-repeat;!!!


6、//平移要在缩放之前 ！！！！例如：screenLis[now].style.transform = 'translateY(' + distance/3 + 'px) scale(' + scale + ')';


7、动画没有设置初始值 如rotate，也没有在from里写rotate就直接在to中写rotate的目标deg，是无法生效的 因为没有【动画初始默认值】


8、样式没起效果：如果是transform可能是写多句后者覆盖了前者
也可能是class或者类名字母拼错
也可能是css结构出错


9、margin-top只在块元素中生效 span i 都不行 必须加display:inline-block;！！！！


10、文本不见了  可能是字体颜色是白色的！！！


11、当类名或者组件名与关键字冲突时，不起效果！！！


12、webstorm中 class没写完整也是蓝色的！！！比如 clas


13、text-align只能使行内元素居中 如span 但不能设置display:block


14、雪碧图的y或者x都是负数（最顶部的图片被顶上去，top变成负数）！！！background: url("../../assets/menu2.png") no-repeat 0 -152px;


15、a标签使用nth-of-type要特别注意，你div中只有一个a标签，你怎么取索引？ 那是在多个div中的a标签！！！！


16、font:12px/30px helvetica;无法使用less！！！必须拆开写


17、background-size background-position 无法被继承，应该哪里用就写哪里！！！


18、雪碧图的rem适配 必须background-size background-position两者都要‘/@rem’ 前者是雪碧图的总大小 后者是某个图标的具体位置！！！


19、移动端禁止系统默认行为的代码
应该是：
document.addEventListener('touchstart',function(event){
event.preventDefault();
});
而不是：
(function (ev) {
ev=ev||event;
ev.preventDefault();
})();


20、在vue开发中 在Index.html文件里的<div id="app"></div>这个id无法被获取。想获取可以在app.vue组件中 最外层增加想要的一层或者多层div并设置id或class


21、Vue中的入口js文件是main.js index.html是主入口文件（先有html再有js）！！！


22、vue中的main.js会 new Vue（{}） 所以在全局都会有$vm对象！！！


23、每个库在不同环境下 语法可能会发生改变，在普通js中获取元素靠document.getElement 而在vue中 需要给指定的标签增加ref属性及属性值 引入写在Js中，逻辑代码写在export default{}中


24、看文档时，如果看到Vue.component(Cell.name, Cell); Vue.component(Checklist.name, Checklist);时  第一个形参是字符串 【它是你对应标签的类名或者id名】！！！！


25、better-scroll 要滚动 需要满足以下条件：
（1）------------------------------  （npm下载忽略）
  mounted(){
    this.$nextTick(() => {
      setTimeout(()=>{
        this.scroll = new BScroll(this.$refs.wrapper, {
          click:true,
          scrollY:true,
          momentum: true,
          HWCompositing: true
        })
      },30)
    })
  }
（2）------------------------------ 
  在<script>中写 import BScroll from 'better-scroll' 
（3）------------------------------ 
  在vue中必须为外层元素写一个ref属性 在例子中，取名为wrapper（可自行修改）
（4）------------------------------  
  外层容器必须与内层容器之间必须没有其他元素
（5）------------------------------  
  外层容器的起始位置与内层元素的起始位置一致 外层容器overflow:hidden 且高度不能超过屏幕css高度