jade,pug使用方法

2018-01-18

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

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

jade -P -w test.jade

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

4. jade 语法

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

a: img

在HTML里面会解析成

1	<a><img></a>

style属性

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

解析后

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

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

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

解析后

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

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

1
2

p
     gg

解析后

1
2
3

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

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

1
2

p
           | gg

解析后

<p>gg</p>

注释。可以通过双斜杠进行注释

一种是能被解析的注释 —- //

一种是不能被解析的注释 —- //-

for循环

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

解析后

1
2
3

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

8.for in 循环

1
2
3

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

解析后

1
2
3

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

9.for in 解析对象

1
2
3

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

解析后

1
2
3

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

if 判断

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

解析后

1	<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的值是其他值

解析后

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

解析后

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

mixin混合模式

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

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

解析后

1	<p>flag是true</p>

13.引入script文件

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

解析后

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

解析后

1	<p>flag是true</p>

14.添加类名和id名

1
2
3

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

解析后

1
2
3

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