jade模板注意事项

1. jade模板语法

doctype html
html
    head
    body
        header
        div

2. 添加内容：直接在标签后边加空格直接写内容

　　如下：

　　　　div 我要写的内容

3. 直接在body内添加内容：body 后边添加 "." 或者直接 “|内容”

　　 "."可以替换多行 "|"

html
    head
    body.
        asdas
　　　　　errdtt
　　　　　dgdtrg

扫描二维码关注公众号，回复： 1681859 查看本文章

html
    head
    body
        |asdas
        |tryr
        |rtytyry

4. 变量： “ #{a} ” 或者代码中 “=a”

doctype html
html
    head
    body
        header
        div
        -var a="kevin"
            div 我的名字叫#{a}

doctype html
html
    head
    body
        header
        div
        -var arr = ["sdfsf","dfddf","cdfsf"]
        -for(var i=0;i<arr.length;i++)
            div=arr[i]

Note: 这里注意里边有“；”时，上述代码 for 前边的 "— "不能省掉 ; 而下边代码的 if 前边的 "—" 可以省掉

doctype html
html
    head
    body
        header
        div
        -var a=6;
        if(a==6)
            div=a
        else
            div skdjhfsk

Note: 使用　"！=" 不转义代码，识别变量中的标签

doctype html
html
    head
    body
        -var a = "<h3>山东富士康</h3>书店合肥收到"
        div!=a

5. switch 特殊处理

html
    head
    body
        -var a=4
        case a
            when 4
                div 5
            when 3
                div 3
            default
                不对

　6.属性（class="box clearfix",src="./a.jpg"）

html
    head
    body
        div(class="box clearfix",data-id="item1")

　　Note 特例 style class ,json和数组表示

html
    head
    body
        div(class=["box","clearfix"],style={width:"100px",height:"100px",background:"pink"},data-id="item1")

html
    head
    body
        -var arr = ["box","clearfix"];
        -var json = {width:"100px",height:"100px",background:"pink"};
            div(class=arr,style=json,data-id="item1")

html
    head
    body
        -var arr = ["box","clearfix"];
        -var json = {width:"100px",height:"100px",background:"pink"};
            div(class=arr, class="active",style=json,data-id="item1")

7.渲染

var str = jade.renderFile('1.jade',{"pretty":true,name:"kevin"})；

fs.writeFile("./a.html",str,function(err){})

jade模板 注意事项

猜你喜欢