使用VUE仿寫【E寵商城】踩坑點
阿新 • • 發佈：2019-01-09
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高度
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高度