vue開發(fā)中遇到的問題
- 不要把 v-if 和 v-for 同時用在同一個元素上
數(shù)據(jù)重復(fù)渲染煤墙，內(nèi)容錯亂。
因為v-for指令的優(yōu)先級高于v-if當(dāng)它們處于同一節(jié)點幢码。v-for 的優(yōu)先級比 v-if 更高但绕，這意味著 v-if 將分別重復(fù)運行于每個 v-for 循環(huán)中示绊。
2.x 版本中在一個元素上同時使用 v-if 和 v-for 時芒率，v-for 會優(yōu)先作用囤耳。
3.x 版本中 v-if 總是優(yōu)先于 v-for 生效。=（3.x修復(fù) v-if 和 v-for 同時用在同一個元素的問題）
個人經(jīng)驗記錄敲董，無需閱讀。
一.說一說項目遇到的問題慰安，然后怎么解決腋寨？
小程序，微信端嵌入HTML網(wǎng)頁跳轉(zhuǎn)鏈接URL參數(shù)丟失問題化焕。解決方法：對URL進行encodeURIComponent()處理萄窜。
請求服務(wù)：資源加載無效資源
上傳視頻資源，后臺轉(zhuǎn)碼撒桨，有時候轉(zhuǎn)碼成功查刻，有時候轉(zhuǎn)碼失敗，
各種轉(zhuǎn)碼失敗凤类，后臺轉(zhuǎn)碼腳本異步穗泵，導(dǎo)致轉(zhuǎn)碼成功，而視頻為空谜疤。
小程序：
問題：圖片驗證碼問題佃延。
描述：圖片驗證碼登錄，后端判斷驗證不成功夷磕。
很多開發(fā)這都是用小程序的授權(quán)登錄履肃，而我這項目中需要用賬號密碼登錄，同時使用圖片驗證碼去校驗坐桩，后端是PHP返回的圖片流尺棋，直接插入到wxml中的image.src里面直接顯示，圖片能清楚顯示绵跷，無怎么提交后端都返回驗證碼錯誤膘螟，狗血的是我用postman測試一直能成功登錄，放到小程序怎么樣都不行碾局。
和后端交流問題萍鲸，他就截圖postman，表示后臺系統(tǒng)程序沒有問題擦俐，直接把鍋丟給前端脊阴。
小程序端，請求正常，請求數(shù)據(jù)格式正常嘿期，驗證碼輸入正確品擎，后臺能返回校驗情況，我也真找不到問題备徐。我這邊只好測試請求數(shù)據(jù)的格式萄传，json，form什么的格式都測試了一遍蜜猾，都不行秀菱。圖片放到最大，確保驗證輸入一定正確蹭睡，無奈衍菱，頁面上的操作無法解決請求的問題。
再和后端溝通肩豁，后端確實有點不耐煩脊串，我叫他返回base64圖片試試看，他卻說postman請求成功清钥，還用PC端后臺登錄也是這樣用都可以琼锋，就不給我返回base64了。
我只好自己瞎搞一下了祟昭，拿著請求格式缕坎，圖片驗證碼不能成功的問題，去百度篡悟，谷歌念赶，360，知乎恰力，博客叉谜，前端的群，一起開發(fā)的朋友同事踩萎，問了一邊停局，翻了一遍，然而都沒有對應(yīng)的問題解決情況香府，又回頭看了小程序請求文檔董栽，最終懂沒有在這個方向解決這個問題。
為了不影響開發(fā)進度企孩，這些糾結(jié)解決不了的問題也只好放在一邊了锭碳。
利用晚上，周末的時間再去找問題解決方法勿璃。
解決問題要點：轉(zhuǎn)換問題的思路擒抛，了解實現(xiàn)的根本原理推汽。
PC端提交驗證圖片驗證碼無誤，這個驗證碼的校驗過程是怎么樣的歧沪？作為前端歹撒，很多人都用圖片驗證碼，但估計都不知道這個直接插入html中的驗證碼诊胞，到底是怎么樣跟后臺校驗的暖夭。原來這個驗證碼獲取的時候，瀏覽器會主動保持['Set-Cookie']里面的值PHPSESSID撵孤，這個值就是后端加密的圖片驗證碼數(shù)字的字符串迈着，在cookie本地，然后提交數(shù)據(jù)驗證的時候后端再取cookie的PHPSESSID解密邪码，校驗提交的驗證碼裕菠。是這樣的流程。然后上小程序論壇霞扬，發(fā)現(xiàn)小程序根本不會主動儲存['Set-Cookie']糕韧，所以后端一直都應(yīng)該拿不到PHPSESSID枫振，然后的校驗肯定是不能成功的喻圃。
然后我要手動存儲['Set-Cookie']，url就是圖片路徑粪滤，我前端怎么能手動存儲['Set-Cookie']斧拍？下載圖片，去請求中的取header['Set-Cookie']杖小，然后保存起來肆汹，提交登錄驗證把保存的header帶上，然后驗證成功予权，問題解決了昂勉。
花了好幾天的時間
總結(jié)：
1.錯誤思路，方向錯誤扫腺，怎么改都是錯岗照。
2.后端不配合，postman請求成功笆环，就不幫忙調(diào)試問題了攒至，幫忙調(diào)試一下，就知道沒有PHPSESSID,那就可以直接知道問題的根處躁劣，解決問題的時間可以縮短90%迫吐；
3.轉(zhuǎn)換思路，了解原理账忘，配合調(diào)試志膀。
4.一般情況熙宇，叫后端都可以打印日志看看就好，像我這樣搞梧却，都是逼的奇颠。
二，你會用筆記本打開網(wǎng)頁文件嗎放航？
千萬不要使用Windows自帶的記事本編輯任何文本文件烈拒。原因是Microsoft開發(fā)記事本的團隊使用了一個非常弱智的行為來保存UTF-8編碼的文件，他們自作聰明地在每個文件開頭添加了0xefbbbf（十六進制）的字符广鳍，你會遇到很多不可思議的問題荆几，比如，網(wǎng)頁第一行可能會顯示一個“?”赊时，明明正確的程序一編譯就報語法錯誤吨铸，等等，都是由記事本的弱智行為帶來的祖秒。
三诞吱，火狐上多行文本超出顯示省略號
多行文本超出顯示省略號
p{
overflow:hidden; // 超出部分隱藏
text-overflow:ellipsis; // 超出部分顯示省略號
display:-webkit-box; // 將對象作為彈性伸縮盒子模型顯示
-webkit-box-orient:vertical; // 規(guī)定框的子元素應(yīng)該被水平或垂直排列
-webkit-box-clamp:2 // 為不規(guī)范屬性，表示展示幾行
}
補充：white-space竭缝，它主要是用來處理元素內(nèi)文本的空白符房维、換行符以及是否允許折行√е剑可選值包括normal（默認）咙俩、pre、nowrap湿故、pre-wrap阿趁、pre-line。
word-wrap坛猪，是用來標(biāo)明是否允許瀏覽器在單詞內(nèi)進行斷句脖阵，為了防止當(dāng)一個字符串太長而找不到它的自然斷句點時產(chǎn)生溢出現(xiàn)象∈裕可選值break-word
word-break命黔，用來標(biāo)明怎樣進行單詞內(nèi)的斷句。默認值normal躁锁，可選值為break-all纷铣，keep-all。
在火狐上战转，-webkit-box-clamp:2不生效
@-moz-documentc url-prefix(){
p{
position: relative;
line-height: 20px;
max-height: 40px;//設(shè)置最大高度搜立，加上overflowhidden，正好是兩行槐秧，使超出部分隱藏
overflow: hidden;
}
p::after{
content: "...";
position: absolute;
bottom: 0; right: 0;
padding-left: 40px;//以上三個屬性啄踊，可以后續(xù)調(diào)整忧设，看要把...放在哪個位置
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);//背景色可寫成漸變也可寫成一樣的顏色
}
}
原理是自己寫一個… 放在最后一行的末尾。
四颠通，在iOS上址晕，輸入框默認有內(nèi)部陰影，但無法使用 box-shadow 來清除顿锰，如果不需要陰影谨垃，可以這樣關(guān)閉：
-webkit-appearance: none;
禁止保存或拷貝圖像
img{-webkit-touch-callout: none;}
設(shè)置input里面placeholder字體的大小
::-webkit-input-placeholder{ font-size:10pt;}
快速回彈滾動，ios,overflow:auto硼控，時系統(tǒng)效果
-webkit-overflow-scrolling: touch;
五刘陶，實際開發(fā)中也經(jīng)常碰到 行高不精確的問題
設(shè)置line-height屬性讓文字垂直居中，發(fā)現(xiàn)在PC端肉眼觀察是居中的牢撼，但是在移動端（Android）上總是發(fā)現(xiàn)文字偏上匙隔，
說是line-height對一部分Android手機不起作用，有自己默認的行高熏版，默認行高為22px
line-height:normal;
padding:10px 0;
改用padding纷责，為好。
