"From HTML to Pug" in Vue's advanced classroom

What is it?

Pug may sound strange, but if you talk about her previous existence, I believe you will have heard: Jade.
Every time you don't listen to the beat, have you ever thought that the <><><><></></></></> damned arrow can be taken off? It's not just looking uncomfortable, but sometimes you get dizzy because you have too many rows.
Perhaps you know, there is a thing called Emmet, it is to solve the writing when you write more of those content, but did not solve the redundant lines of code, not to mention before you are not fully proficient in the use of Emmet, the brain needs to do a lot of pre-translation!
So is there a way to reduce the amount of code, but also do not do pre-translation of the scheme, now, the Jade this back-end template appeared, and then changed to name Pug, Vue also supports this syntax, specifically, please look down.

How to use

1. npm i -D pug pug-loader
2. <template lang=‘pug‘>Can

I like to use Pug, Coffeescript, Sass, the former two have a common philosophy, Coffeescript said that he is JavaScript, the same, pug is HTML, you can understand the syntax of sugar.

How is the skill

2. Let's look at some HTML code first.

   <label>    <input type=‘checkbox‘ />    <span>记住密码</span>    <div class=‘show-box‘></div></label>

   95 characters, 5 lines, 3 end tags

   The whole Cheng Pug
   label input(type="checkbox") span 记住密码 .show-box

   54 characters, 4 lines, no end tag

3. The difference has, surprised not pleasantly surprised? Again!

   <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 lines, 671 characters, 9 end tags

   .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 lines, 481 characters, no end tag (here my personal writing habit is to enter the cut, in order to unify the use of this notation)

5. Simple projections

   Approximately 30% savings in code, line savings of 20%. if the company's performance is calculated by the number of lines or the amount of code is not used-

   Tips

7. Vue use there's no need to pay attention to where

   No, not at all, the ":" On the colon, the "@" on the shift+2

9. Some little pits

   Note Use the ' | ' Symbols to cut text, such as:
   span i span.red love | you // 这里没必要再用一个span，使用“|”即可

11. Pug Other Features

    Here remember Pug is the back-end template, so the function is not only simplified syntax so simple, she also has variables, mixing, filtering and so on, but in fact, these functions in use with the Vue function, we build the project is mainly Vue, so can use Vue's on the Vue, Pug for our project, the biggest function is to streamline and tidy up the code.
    Follow-up will also have sass and Coffeescript tutorial, these three together, well, basically is no redundant code of the minimalist wind.
    For additional features, please visit: Pug official website

13. Strongly recommend

    Pug,coffeescript, and Sass combined, will work wonders! Two other programs, I will follow up in the follow-up article, please look forward to! 、

    Expect

I hope you will pay great attention and positive comments, only communication can progress! I will work hard to know the small skills dedicated to everyone, just beginning to write the text, writing hope you understand. Thank you

"From HTML to Pug" in Vue's advanced classroom