Vue進階課堂之《從HTML到Pug》

是啥

Pug聽起來或許比較陌生，可是若是提及她的前生，相信各位多少會有耳聞：Jade。
每當你不停的敲打<><><><></></></></>的時候，可曾想過，這該死的箭頭是否是能夠拿掉？這不僅僅是看着不舒服，有時候還會由於行數過多，而致使你頭暈眼花。
或許你知道，有個東西叫emmet，它是解決了你寫的時候多寫的那些內容，可是並無解決冗餘的代碼行數，更不要提在你沒有徹底熟練使用emmet前，腦子裏面須要進行大量的預翻譯！
那麼是否有一種既能減小代碼量，又能不作預翻譯的方案呢，吶吶吶，Jade這個後端模板出現了，而後更名叫Pug了，如今Vue也支持這個語法，具體請往下看。

如何使用

1. npm i -D pug pug-loader
2. <template lang='pug'> 便可

本人喜歡使用Pug、CoffeeScript、Sass，前二者有共有的哲學，CoffeeScript說本身就是JavaScript，一樣的，Pug也就是HTML，你能夠理解成語法糖。

功力如何

1. 咱們先來看一段HTML代碼

   <label>
       <input type='checkbox' />
       <span>記住密碼</span>
       <div class='show-box'></div>
   </label>

   95個字符，5行，3個結束標籤

   整成Pug

   label
     input(type="checkbox")
     span 記住密碼
     .show-box

   54個字符，4行，沒有結束標籤

2. 差異有了，驚不驚喜？再來！

   <div class="container">
     <div class="ver seller">
       <input type="number" v-model="storeId" placeholder="輸入店號" @focus="passwordShow=false" class="storeId"/>
       <div class="nav">
         <button @click="clickGo(0)" class="go">我是賣家</button>
         <button @click="clickRegist" class="little">註冊賣家</button>
         <button @click="clickGo(1)" class="go">我是買家</button>
       </div>
     </div>
     <div v-if="passwordShow" class="ver password">
       <input type="password" v-model="password" placeholder="輸入你的6位密碼" class="storeId"/>
       <button @click="login" class="go">點擊登陸</button>
     </div><span v-if="passwordShow" @click="passwordShow=false" class="buyer-show">重置</span>
   </div>

   15行，671個字符，9個結束標籤

   .container
     .ver.seller
       input.storeId(type='number' v-model='storeId' placeholder='輸入店號' @focus='passwordShow=false')
       .nav
         button.go(@click='clickGo(0)') 我是賣家
         button.little(@click='clickRegist') 註冊賣家
         button.go(@click='clickGo(1)') 我是買家
     .ver.password(v-if='passwordShow')
       input.storeId(type='password' v-model='password' placeholder='輸入你的6位密碼')
       button.go(@click='login') 點擊登陸
     span.buyer-show(v-if='passwordShow' @click='passwordShow=false') 重置

   11行，481個字符，沒有結束標籤（這裏我我的書寫習慣是回車切割，爲了統一對比採用這種寫法）

3. 簡單推算

   大約代碼量節省30%，行數節省20%。 若是公司績效算行數或代碼量的千萬別用- -

tips

1. Vue 使用有沒有什麼須要注意的地方

   沒有，徹底沒有，該「：」就冒號，該「@」就shift+2

2. 一些小坑

   注意使用「|」符號來切割文字，如：

   span
       i
       span.red love
       | you // 這裏不必再用一個span，使用「|」便可

3. Pug其餘功能

   這裏記得Pug是後端模板起家，因此功能確定不僅僅是簡化語法這麼簡單，她也有變量、混合、過濾等等等等功能，可是實際上這些功能在使用中跟Vue功能重複，咱們搭建項目主要仍是Vue，因此能用Vue的就用Vue的，Pug對於咱們項目來講，最大的功能就是精簡和整理代碼。
   後續還會有Sass與CoffeeScript教程，這三個搭配在一塊兒，恩，基本就是無多餘代碼的極簡風了。
   如需瞭解其餘功能，請前往官網查閱： Pug官網

4. 強烈建議

   Pug，CoffeeScript，以及Sass聯合使用，會有奇效！其餘兩個方案，我會在後續文章中跟進，敬請期待！、

期待

但願各位大大 關注以及積極評論，只有交流纔有進步！我會努力把本身知道的小技巧奉獻給你們，剛開始寫文，文筆但願各位諒解。謝謝