如何優雅的記錄編程中遇到的問題，記錄編程

如何優雅的記錄編程中遇到的問題，記錄編程

一篇持續更新的乾貨貼♪（＾∀＾●）ﾉｼ

1. 解決div中文字和圖片水平對齊問題

當div同時出現img和span，會出現圖片高於文字的現象，用以下三種方法可以解決這個問題。
1、第一種方法是使用vertical-align: middle
首先設定圖片和文字的vertical-align: middle這個時候要注意，如果圖片大小和文字大小不一樣，比如20px的圖片和16px的字，一定要設定文字的line-height屬性。代碼如下：

      <li class="item">         <img src="../../assets/msg.png"/>         <span>訊息</span>       </li>

css代碼如下

  .item span {    vertical-align: middle;    display: inline-block;    height: 24px;    line-height: 24px;    font-size: 16px;  }  .item img{    width: 24px;    height: 24px;    vertical-align: middle;  }

未設定vertical-align時，img將高於文字

都設定vertical-align，但未設定line-height時，文字將與圖片的頂端對齊，此時文字是不置中的。

設定line-height後文字將於圖片水平對齊。

2、第二種方法是將圖片設定為文字的背景

<div>圖片將會出現在文字的右側</div>.search{ background: url("./search.png") no-repeat left; background-size: 18px 18px; }

3、第三種方法是給img和圖片均設定display：inline-block然後通過margin和height設定達到水平對齊的效果，但是不建議使用此方法。會讓布局看起來非常混亂，不易維護。
2. 如何在vue中實現textarea的剩餘字數顯示（v-model實現雙向繫結的原理）

 <div class="item" id="text">    <label>簡述：</label>    <textarea maxlength="300" v-model="text"  ></textarea></div> <div id="icount">    <p id="spann">您還可以輸入{{wordc}}字</p> </div>

以下是script部分代碼

data () {      return {        text: '',        wordc: '300'      }    },    methods: {      mycou: function (event) {        var a = this.text.length        this.wordc = 300 - a      }    }

知識點：
首先來看看v-model的官方文檔

也就是v-modle實際為文法糖。v-model=”something”則表示將value值綁定在something上，當值發生改變時觸發綁定的input事件。input事件綁定的函數是將更改後的value值覆蓋原value值。所以：

• something即是即時的value值，每一次value值得更改都會觸發something改變
• 如果有別的控制項綁定something那麼input的value值改變改控制項的值顯示，因此實現了雙向繫結

3、 為何vue的大型項目中data需要使用return返回資料呢？
知識點：不使用return包裹的資料會在項目的全域可見，會造成變數汙染

4、css樣式的覆蓋規則
css樣式明明檢查沒什麼問題卻顯示不出來多半是（裝的，刪了重寫就好）因為被其他樣式覆蓋了，只要提高優先順序就可以解決。
知識點：
在為元素定義樣式時常會發生樣式衝突的情況。那麼此時應該以什麼為標準進行樣式選擇呢？

1、由於繼承而發生樣式衝突時，最近祖先獲勝，而指定樣式優先順序高於繼承樣式的優先順序。
2、直接指定的樣式發生衝突時，優先順序按照指定方式優先順序如下排序：
內聯樣式的權值>>ID選取器>>類別選取器>>標籤選取器。後代選取器的權值為每項權值之和。
3、樣式權值相同時，後者獲勝。
4、樣式表檔案越靠後，優先順序越高。
5、!important的樣式屬性不被覆蓋。

5、如何在vue當中實現遮罩層

<button @click="upda">顯示遮罩層</button><div id="zzc" v-show="info"></div>

script代碼：

upda: function (event) {        this.info = true}

css代碼：

 #zzc{    position: absolute;    top: 0px;    z-index: 200;    width:100%;    height: 1200px;    background: #000;    opacity: 0.4;    filter:alpha(Opacity=10);  }

知識點：
Z-index 僅能在定位元素上奏效。因此必須設定position否則不會出現層疊效果。

6、如何正確擷取Promise Object
用Sequelize類擷取的資料是Promise Object是無法直接操作的。此時應在方法前加await

 var userdata = await user.get(name); var uname = userdata[0].name; var upsd = userdata[0].psd;

如果不加await將會出現undefinde報錯

7、為什麼setTimeout（0）會順延強制
這裡涉及到javascript單線程執行的問題：javascript在瀏覽器中是單線程執行的，必須在完成當前任務後才執行隊列中的下一個任務。

另外，對於javascript還維護著一個setTimeout隊列，未執行的setTimeout任務就按出現的順序放到setTimeout隊列，等待普通的任務隊列中的任務執行完才開始按順序執行積累在setTimeout中的任務。

8、在不知道子項目高度情況下的垂直置中

.main{        position: absolute;        top: 50%;        left: 50%;        transform:translate(-50%,-50%);    }

9、忘記密碼情況下的密碼重設
第一步： 點擊系統喜好設定->最下邊點MySQL，在彈出頁面中，關閉服務
第二步： 進入終端輸入：cd /usr/local/mysql/bin/ 斷行符號後 登入管理員權限 sudo su 斷行符號後輸入以下命令來禁止mysql驗證功能 ./mysqld_safe –skip-grant-tables & 斷行符號後mysql會自動重啟（喜好設定中mysql的狀態會變成running）
第三步： 輸入命令 ./mysql 斷行符號後，輸入命令 FLUSH PRIVILEGES; 斷行符號後，輸入命令 SET PASSWORD FOR ‘root’@’localhost’ = PASSWORD(‘你的新密碼’);

10、用vue實現導覽列底線切換。效果如csdn首頁導覽列的底線切換
template部分如下：

    <ul class="nav">        <li v-for="(item,index) in navlist" :class="{active:!(index-menuIndex)}" :key="item" @click='menuShow(index)' ><a href="#"  v-text="item" ></a></li>    </ul>

script部分如下：

 data () {    return {            menuIndex: -1,            navlist: ['推薦', '資訊', '人工智慧', '程式人生'],        }    },    methods: {        menuShow: function (index) {            this.menuIndex = index        }    }

覺得vue當中應該盡量避免dom操作就嘗試不直接操作dom去解決，發現代碼比寫dom要精簡一些。記錄下來，避免重複爬坑。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。