Jade/Pug学习（二）之语法规则上

语法

⚠️实例均结合node

jade缩进代表层级

html                <html></html>

html                <html>
    head                <head>
        style                <style></style>
                    </head>
    body                <body>
        div                <div></div>
        div                <div></div>
                    </body>
                </html>

左边渲染完就是右边

jade中render()表示渲染文本

const jade = require('jade');
var str = jade.render('html'); // render()表示渲染
console.log(str);

// 此时输出：<html></html>

jade中renderFile()表示渲染文件

// 1.jade内容：
html
    head
        script
        style
    body
        div
            ul
                li
                li
                li
// jade2.js内容：
const jade = require('jade');
var str = jade.renderFile('./work/view/1.jade'); // rendeFile()表示渲染文件
console.log(str);

// 此时输出：<html><head><script></script><style></style></head><body><div><ul><li></li><li></li><li></li></ul></div></body></html>

jade使用参数{pretty:true}美化

// jade2.js内容：美化
const jade = require('jade');
var str = jade.renderFile('./work/view/1.jade',{pretty:true}); // pretty:true对输出进行美化，只开发用，开发完实际使用时不需要
console.log(str);

// 此时输出：
<html>
  <head>
    <script></script>
    <style></style>
  </head>
  <body>
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
</html>

jade属性放在()里面，逗号分隔

// 2.jade内容：
html
    head
        script(src="a.js")
        style(type="text/css")
        link(type="text/css",rel="stylesheet")
    body
        div
            ul(id="box")
                li
                    input(type="text",id="txt1",value="111")
                li
                    input(type="text",id="txt1",value="111")
                li
                    input(type="text",id="txt1",value="111")

// jade2.js内容：
const jade = require('jade');
var str = jade.renderFile('./work/lesson12/view/2.jade',{pretty:true}); // render()表示渲染
console.log(str);    

// 此时输出：
<html>
  <head>
    <script src="a.js"></script>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div>
      <ul id="box">
        <li>
          <input type="text" id="txt1" value="111"/>
        </li>
        <li>
          <input type="text" id="txt1" value="111"/>
        </li>
        <li>
          <input type="text" id="txt1" value="111"/>
        </li>
      </ul>
    </div>
  </body>
</html>

jade中style属性的两种写法：普通属性写法和json写法

html
    head
        script
        style(type="text/css")
        link(type="text/css",rel="stylesheet")
    body
        div(style="200px;height:200px;background:red") // 普通属性写法
        div(style={'200px', height:'200px', background:'red'}) // json写法
// 此时输出：
<html>
  <head>
    <script></script>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div style="200px;height:200px;background:red"></div>
    <div style="200px;height:200px;background:red"></div>
    <div title="[object Object]"></div>
  </body>
</html>

jade中Class属性的两种写法：普通属性写法和数组写法

html
    head
        script
        style(type="text/css")
        link(type="text/css",rel="stylesheet")
    body
        div(class="aaa bbb ccc")
        div(class=["aaa","bbb","ccc"])
        div(title=["aaa","bbb","ccc"])
// 此时输出：
<html>
  <head>
    <script></script>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc"></div>
    <div title="aaa,bbb,ccc"></div>
  </body>
</html>

jade中class和id的使用“.”和“#”简写

html
    head
        script
        style(type="text/css")
        link(type="text/css",rel="stylesheet")
    body
        div.aaa // 一个class
        div#box // 一个id
        div.aaa.bbb // 多个class
    div#box.aaa // id和class混用
// 此时输出：
<html>
  <head>
    <script></script>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div class="aaa"></div>
    <div id="box"></div>
    <div class="aaa bbb"></div>
  </body>
</html>

jade中class和id简写和非简写可混合使用

html
    head
        script
        style(type="text/css")
        link(type="text/css",rel="stylesheet")
    body
        div.aaa(title="bbb")
        div#box
        div.aaa.bbb
// 此时输出：
<html>
  <head>
    <script></script>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div title="bbb" class="aaa"></div>
    <div id="box"></div>
    <div class="aaa bbb"></div>
  </body>
</html>

jade中使用&attributes将非style属性写成json格式

html
    head
        script
        style(type="text/css")
        link(type="text/css",rel="stylesheet")
    body
        div&attributes({id:'box',class:'aaa'}) // 使用&attributes写成json格式
此时输出：
<html>
  <head>
    <script></script>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div id="box" class="aaa"></div>
  </body>

jade将生成的字符串放到html中

// Jade3.js内容：
const jade = require('jade');
const fs = require('fs');
var str = jade.renderFile('./work/lesson12/view/2.jade',{pretty:true}); 
fs.writeFile("./work/lesson12/build/a.html",str,function(err){
    if(err){
        console.log("失败");
    }else {
        console.log("成功");
    }
});

// 此时发现build文件夹下多了一个a.html
// 此时a.html内容：
<html>
  <head>
    <script src="a.js"></script>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div>
      <ul id="box">
        <li>
          <input type="text" id="txt1" value="111"/>
        </li>
        <li>
          <input type="text" id="txt1" value="111"/>
        </li>
        <li>
          <input type="text" id="txt1" value="111"/>
        </li>
      </ul>
    </div>
  </body>
</html>

jade内容空个格，直接往后堆

// 3.jade内容：
html
    head
        script(src="a.js") alert("aaa")
        style(type="text/css") div{background:red;}
        link(type="text/css",rel="stylesheet")
    body
        div(id="box") hello word
            p hi
            a(href="http://www.baidu.com") 哈哈哈
            a(href="http://www.baidu.com") 嘿嘿嘿

// jade4.js内容：
const jade = require('jade');
const fs = require('fs');
var str = jade.renderFile('./work/lesson12/view/3.jade',{pretty:true}); // render()表示渲染
fs.writeFile("./work/lesson12/build/c.html",str,function(err){
    if(err){
        console.log("失败");
    }else {
        console.log("成功");
    }
});

// 此时生成c.html:
<html>
  <head>
    <script src="a.js">alert("aaa")</script>
    <style type="text/css">div{background:red;}</style>
    <link type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div id="box">hello word
      <p>hi</p><a href="http://www.baidu.com">哈哈哈</a><a href="http://www.baidu.com">嘿嘿嘿</a>
    </div>
  </body>
</html>

jade对于内容大段代码如何处理？

// 错误写法：
html
    head
        script(src="a.js") window.onload = function(){
            var oBtn = document.getElementById("div");
        }
        style(type="text/css") div{background:red;}
        link(type="text/css",rel="stylesheet")
    body

总结：
jade
1.根据缩进，规定层级
2.属性放在()里面，逗号分隔 script(src="a.js"，type="text/script")
3.内容空个格，直接往后堆 a(href="http://www.zhinengshe.com/") 官网

Style属性的两种写法：
1.普通属性写法
（{style="200px; height:200px; background:red"}）
2.json写法（如果属性值是动态的，是传进来的，用json就很方便了）
（style={'200px', height:'200px', background:'red'}）

Class属性的两种写法：
1.普通属性写法
（{class="aaa bbb ccc"}）
2.数组写法（如果属性值是动态的，是传进来的，用json就很方便了）
（{class=["aaa","bbb","ccc"]}）

class和id属性简写：
1.添加一个class
.类名
2.添加多个class
.类名.类名
3.添加一个id
#id名

属性的另一种写法：
使用&attributes：表明属性是json形式

jade.render('字符串');
jade.renderFile('模板文件名', 参数)

注：简写和非简写可混合使用