Jade學習（二）之語法規則上

時間 2019-11-24

標籤 jade 學習語法規則欄目 Node.js 简体版

原文原文鏈接

語法

⚠️實例均結合node

jade縮進表明層級

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

左邊渲染完就是右邊css

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="width:200px;height:200px;background:red") // 普通屬性寫法
        div(style={width:'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="width:200px;height:200px;background:red"></div>
    <div style="width: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/") 官網html

Style屬性的兩種寫法：
1.普通屬性寫法
（{style="width:200px; height:200px; background:red"}）
2.json寫法（若是屬性值是動態的，是傳進來的，用json就很方便了）
（style={width:'200px', height:'200px', background:'red'}）node

Class屬性的兩種寫法：
1.普通屬性寫法
（{class="aaa bbb ccc"}）
2.數組寫法（若是屬性值是動態的，是傳進來的，用json就很方便了）
（{class=["aaa","bbb","ccc"]}）json

class和id屬性簡寫：
1.添加一個class
.類名
2.添加多個class
.類名.類名
3.添加一個id
#id名數組

屬性的另外一種寫法：
使用&attributes：代表屬性是json形式less

jade.render('字符串');
jade.renderFile('模板文件名', 參數)ui

注：簡寫和非簡寫可混合使用spa