jade|pug使用方法

Jade是一款基于haml的html模版引擎，采用Java cript实现，可以方便地 在Node.js、Yeoman等框架中使用，已改名为pug

1. 全局安装

npm install jade -g

-g代表全局安装，如果安装出错，可能是权限问题，在前面加上sudo

sudo npm install jade -g

下载的时候可能会有点慢，所以在此之前可以下下载一个淘宝镜像，毕竟这些都是国外的东西，每次安装的时候都要翻墙，而淘宝镜像类似于一比一还原国外的中国地址，从这上面下载不需要翻墙，会必将快。
首先安装淘宝镜像

$ npm install -g cnpm
然后全局安装jade
sudo cnpm install jade -g

2. 创建文件，后缀名为jade

<div style="text-align:center">

image.png

</div>

3. 在控制台，进入当前文件的文件夹下，输入命令

jade -P -w test.jade

-P 代表不压缩HTML
-w 监听文件变化，在test.jade里面输入东西保存之后，会自动生成一个test.html文件

4. jade 语法

1.jade通过缩进关系，代替以往HTML的层级包含关系。注意要统一使用Tab或者空格缩进，不要混用

2. 内联书写层级

 a: img 

在HTML里面会解析成

<a><img></a>

3. style属性

div(style={width:"100px",height:"100px"})

解析后

<div style="width:100px;height:100px"></div>

4. 使用“-”来定义变量，使用“=”把变量输出到元素内，通过#{var}插到相应标签里面

-var a = 9;
        p a的值为#{a}

解析后

<p>a的值为9</p>

• 5. 文本 通过在文字前添加符号"|"可以让jade原样输出内容，在HTML标记后，通过空格隔开。
     不加“|”是，gg会被当成自定义标签解析

p
     gg

解析后

<p>
     <gg></gg>
</p>

加上“|”，就是内容，而且可以多行写

p
           | gg

解析后

<p>gg</p>

6. 注释。可以通过双斜杠进行注释
   一种是能被解析的注释 ---- //
   一种是不能被解析的注释 ---- //-

7. for循环

-for(var i = 0;i < 3;i++)
      p 这是for循环中的span#{i}

解析后

   <p>这是for循环中的span0</p>
   <p>这是for循环中的span1</p>
   <p>这是for循环中的span2</p>

8.for in 循环

-var str = ["这是字符串1","这是字符串2","这是字符串3"];
            for val in str
                p #{val}

解析后

   <p>这是字符串1</p>
   <p>这是字符串2</p>
   <p>这是字符串3</p>

9.for in 解析对象

-var obj = [{name:"张三",age:"18"},{name:"李四",age:"19"},{name:"王二",age:"20"}];
            for item in obj
                p 姓名是#{item.name},年龄是#{item.age}

解析后

   <p>姓名是张三,年龄是18</p>
   <p>姓名是李四,年龄是19</p>
   <p>姓名是王二,年龄是20</p>

10. if 判断

-var flag = true;
            if flag
                p flag是true
            else
                p flag是false

解析后

<p>flag是true</p>

-11. switch……case语句

-var a = 3;
            case a
                when 1
                    p a的值是1
                when 1
                    p a的值是1
                default
                    p a的值是其他值

解析后

<p>a的值是其他值</p>

解析后

<ul>
          <li>这里是ul里面的li 0</li>
          <li>这里是ul里面的li 1</li>
          <li>这里是ul里面的li 2</li>
        </ul>
        <p>宠物的名字是大黄,它的性别是 公</p>

12. mixin混合模式

mixin list
            ul
                -for(var i = 0;i < 3;i++)
                    li 这里是ul里面的li #{i}

        +list
        mixin pet(name,sex)
            p 宠物的名字是#{name},它的性别是 #{sex}
        +pet("大黄","公")

解析后

<p>flag是true</p>

13.引入script文件

script(type="text/javascript").
        function(){
            console.log(11111)
        }

解析后

<script type="text/javascript">
    function(){
        console.log(11111)
    }
  </script>

解析后

<p>flag是true</p>

14.添加类名和id名

div.box 带有类名为box的div
        div#box 带有id名为box的div
        div.box#box1 带有类名和id名为box的div

解析后

<div class="box">带有类名为box的div</div>
    <div id="box">带有id名为box的div</div>
    <div id="box1" class="box">带有类名和id名为box的div</div>