Jade/Pug学习（三）之语法规则下

jade可以自动识别单双标签

// 1.jade内容：
input(type="button", value="点击")
    div
// 此时输出❌error:input is self closing and should not have content，input为单标签不能有内容

Jade中所有自定义标签都认为是双标签

// 2.jade内容：
html
    head
    body
        div
            aaa
// 此时输出：
<html>
  <head></head>
  <body>
    <div>
      <aaa></aaa>
    </div>
  </body>
</html>

Jade中原样输出方法一使用“|”

// 3.jade内容：
html
    head
        script 
            |window.onload = function(){   // ⚠️一定要相对script缩进，才能出现在script里面
            |   var oBtn = document.getElementById("btn1");
            |   oBtn.onClick = function(){
            |       alert(1);
            |   }
            |}
    body
        |aaa
        |bbb
        |ccc
// 此时输出：
<html>
  <head>
    <script>
       
      window.onload = function(){
        var oBtn = document.getElementById("btn1");
        oBtn.onClick = function(){
            alert(1);
        }
      }
    </script>
  </head>
  <body>
    aaa
    bbb
    ccc
  </body>
</html>

Jade中原样输出方法二使用“.”

// 4.jade内容：
html
    head
        script.
            window.onload = function(){
               var oBtn = document.getElementById("btn1");
               oBtn.onClick = function(){
                   alert(1);
               }
            }
    body.
        aaa
        bbb
        ccc
// 此时输出：
<html>
  <head>
    <script>
      window.onload = function(){
         var oBtn = document.getElementById("btn1");
         oBtn.onClick = function(){
             alert(1);
         }
      }
    </script>
  </head>
  <body>
    aaa
    bbb
    ccc
  </body>
</html>

Jade中原样输出方法三使用include：可以将html、style、head部分、script等等当成一个整个文件引入到页面中

// 5.jade内容：
html
    head
        script
            include ../a.js
    body
        include ../a.txt

// a.js内容：
window.onload = function(){
    var oBtn = document.getElementById("btn1");
    oBtn.onClick = function(){
        alert(1);
    }
 }

// a.txt内容：
aaa
bbb
ccc

// 此时输出：
<html>
  <head>
    <script>window.onload = function(){
    var oBtn = document.getElementById("btn1");
    oBtn.onClick = function(){
        alert(1);
    }
 }
    </script>
  </head>
  <body>aaa
bbb
ccc
  </body>
</html>

jade中赋值使用“#{}”

// 6.jade内容：
html
    head
        script
    body
        div 我的名字：#{name}

// jade2.js内容：
const jade = require('jade');
var str = jade.renderFile('./work/lesson13/view/6.jade',{pretty:true,name:'blue'});
console.log(str);

// 此时输出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div>我的名字：blue</div>
  </body>
</html>

jade中简写使用“=”赋值

// 简写：
// 11.jade内容：
html
    head
        script
    body
        span=a
        span=b

// Jade7.js内容：
const jade = require('jade');

var str = jade.renderFile('./work/lesson13/view/11.jade',{
    pretty:true,
    a:12,
    b:56
});

console.log(str);

// 此时输出：
<html>
  <head>
    <script></script>
  </head>
  <body><span>12</span><span>56</span></body>
</html>

jade中的数据传递（可以做一些运算）

// 7.jade内容：
html
    head
        script
    body
        div 计算结果为：#{a + b}

// jade3.js内容：
const jade = require('jade');
var str = jade.renderFile('./work/lesson13/view/7.jade',{pretty:true,a:12,b:13});
console.log(str);

// 此时输出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div>计算结果为：25</div>
  </body>
</html>

jade中的数据传递（做更多的事情）

// 8.jade内容：
html
    head
        script
    body
        div(style=json)
        div(class=arr)

// jade4.js内容：
const jade = require('jade');

var str = jade.renderFile('./work/lesson13/view/8.jade',{
    pretty:true,
    json:{
        '200px', 
        height:'200px', 
        background:'red'
    },
    arr:["aaa","bbb","ccc"]
});

console.log(str);

// 此时输出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div style="200px;height:200px;background:red"></div>
    <div class="aaa bbb ccc"></div>
  </body>
</html>

jade可以加多个class

// 9.jade内容：
html
    head
        script
    body
        div(style=json)
        div(class=arr)
        div(class=arr class="active") // 这个active将融入进去
        div(class=arr)
        div(class=arr)

// 此时输出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div style="200px;height:200px;background:red"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc active"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc"></div>
  </body>
</html>

jade中识别代码使用“-”（直接定义变量，直接写js）

// 10.jade内容：
html
    head
        script
    body
        -var a=12;
        -var b=13;
        div 计算结果为：#{a + b}

// 此时输出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div>计算结果为：25</div>
  </body>
</html>

jade中的循环

// 12.jade内容：
html
    head
        script
    body
        -for(var i=0; i<arr.length; i++)
            div=arr[i] // ⚠️一定要相对for缩进


// Jade8.js内容：
const jade = require('jade');
var str = jade.renderFile('./work/lesson13/view/12.jade',{
    pretty:true,
    arr:["jhkh","bhiysia","hihn"]
});
console.log(str);

// 此时输出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div>jhkh</div>
    <div>bhiysia</div>
    <div>hihn</div>
  </body>
</html>

jade中如何输出html标签？

// 13.jade内容：
html
    head
        script
    body
        div #{content}

// jade9.js内容：
const jade = require('jade');

var str = jade.renderFile('./work/lesson13/view/13.jade',{
    pretty:true,
    content:"<div>留言</div><p>口红口红打底好看的话</p>"
});

console.log(str);

//此时输出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div>&lt;div&gt;留言&lt;/div&gt;&lt;p&gt;口红口红打底好看的话&lt;/p&gt;</div>
  </body>
</html>

⚠️此时我们发现jade自动帮我们将html标签转换成了html实体，防止注入式攻击

❗️注入式攻击：比如留言的时候写了一些标签，做了一些破坏性的操作，如果直接就显示标签会可能带来很大的危害

jade中非转义输出html标签使用“!=”或“!{}”

// 14.jade内容：
html
    head
        script
    body
        div!=content ⚠️也可以写成div !{content}// 此时输出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div><div>留言</div><p>口红口红打底好看的话</p></div>
  </body>
</html>

jade中使用if-else if-else

// 15.jade内容：
html
    head
        script
    body
        -var a=13;
        -if(a%2==0)
            div(style={'200px',height:'200px'})
        -else
            div(style="300px;height:300px")

// 此时输出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div style="300px;height:300px"></div>
  </body>
</html>


// other
- var isTrue = true
- var lessons = ['jade','js']
if lessons 
    if lessons.length>2
        p more than 2: #{lessons.join(',')}
    else if lessons.length>1
        p more than 1: #{lessons.join(',')}
    else
        p no1 lessons
else
        p no2 lessons

jade中使用unless（为false就继续执行）

- var isTrue = true

unless !isTrue ⚠️此时判读为false所以继续往下执行
    p #{lessons.length}

jade中使用case-when（js的swith）

// 16.jade内容：
html
    head
        script
    body
        -var a=3; ⚠️因为此处加了“-”所以下面不需要再加了，jade会自动识别代码，如果前面是代码后面也一直是代码就不需要加，目前只在此处做了实验，但10.jade不可以
        case a
            when 1
                div aaa ⚠️这些都没加“-”，原因见上面
            when 2
                div bbb
            when 3
                div ccc
            default
                |不靠谱

// 此时输出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div>ccc</div>
  </body>
</html>

⚠️jade都支持js中的语法

jade中使用each-in(js的for-in)

// 遍历对象
-var json={
    a:1,
    b:2
}  

each value,key in json 
     p #{key}:#{value}


// 遍历数组
-var arr = ["aaa","bbb"]

each value in arr
    p= value ⚠️也可以写成p #{value}

// 嵌套循环
- var sections = [{id:0,items:['a','b']},{id:1,items:['c','d']}]
dl
    each section in sections
        dt= section.id
        each items in section.items
            dd= items

jade完整实例

// index.jade内容：
doctype
html
    meta(charset="utf-8")
    title jade测试
    head
        style.
            div{
                100px;
                height:100px;
                line-height:100px;
                background:"#ccc";
                text-align:center;
                float:left;
            }
            div.last{
                background:red;
            }
        script
    body
        -var a=12;
            while a < 30
                if(a%4==0 && a!=0)
                    div.last=a++   / div.last #{a++}
                else
                    div=a++ / div #{a++}
                

// main.js内容：
const jade = require('jade');
const fs = require('fs');

var str = jade.renderFile('./work/lesson13/view/index.jade',{
    pretty:true
});

fs.writeFile("./work/lesson13/build/index.html",str,function(err){
    if(err){
        console.log("编译失败");
    }else{
        console.log("成功"); 
    }
})


// build内容：
<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title>jade测试</title>
  <head>
    <style>
      div{
          100px;
          height:100px;
          line-height:100px;
          background:"#ccc";
          text-align:center;
          float:left;
      }
      div.last{
          background:red;
      }
    </style>
    <script></script>
  </head>
  <body>
    <div class="last">12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div class="last">16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div class="last">20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div class="last">24</div>
    <div>25</div>
    <div>26</div>
    <div>27</div>
    <div class="last">28</div>
    <div>29</div>
  </body>
</html>

jade中使用mixin来写代码块(有点像js函数)

案例一：基础

doctype html
html
    head 
        title hello jade
    body
        mixin lesson  // 声明一个mixins
            p hello world
        +lesson // 使用+加上mixins的名字来调用

// 输出
<!DOCTYPE html>
<html>
 <head> 
   <title>hello jade</title>
 </head>
 <body>
   <p>hello mixin</p>
 </body>
</html>

案例二：传参

html
    head
        script
    body
        mixin lesson2(name,arr)
            p #{name}
            ul
                each value in arr
                    li #{value}
        +lesson2("wang",["111","222"])

// 输出
<html>
  <head>
    <script></script>
  </head>
  <body>
        <p>wang</p>
        <ul>
          <li>111</li>
          <li>222</li>
        </ul>
  </body>
</html>

案例三：嵌套

html
    head
        script
    body
        mixin lesson2(name,arr)
            p #{name}
            ul
                each value in arr
                    li #{value}
        mixin lesson3(json)
            p #{json.name}
            +lesson2(json.name,json.arr)
        +lesson3({name:"wang",arr:["111","222"]})

// 输出
<html>
  <head>
    <script></script>
  </head>
  <body>
        <p>wang</p>
            <p>wang</p>
            <ul>
              <li>111</li>
              <li>222</li>
            </ul>
  </body>
</html>

案例四：传递代码块使用block

html
    head
        script
    body
        mixin lesson4(text)
            h4 #{text}
            if block
               block
            else
               p no text
        +lesson4('testing')
            p hello world

// 输出
<html>
  <head>
    <script></script>
  </head>
  <body>
        <h4> testing </h4>
        <p>block</p>
  </body>
</html>

案例五：传属性，实际上传过来的属性参数被存在一个attributes对象中

方法一：

html
    head
        script
    body
        mixin lesson5(text)
            p #{text}
            h4(class=attributes.class,id=attributes.id)
        +lesson5('testing')(class="attr",id="id")

// 输出
<html>
  <head>
    <script></script>
  </head>
  <body>
        <p>testing</p>
        <h4 id="id" class="attr"></h4>
  </body>
</html>

方法二：使用&attributes

html
    head
        script
    body
        mixin lesson5(text)
            p #{text}
            h4&attributes(attributes)
        +lesson5('testing')(class="attr",id="id")

// 输出
<html>
  <head>
    <script></script>
  </head>
  <body>
        <p>testing</p>
        <h4 id="id" class="attr"></h4>
  </body>
</html>

案例六：不确定传参使用"..."

html
    head
        script
    body
        mixin lesson5(text,...items)
            ul(class="#{text}")
                each value in items
                    li= value
        +lesson5('testing','aa','bb','cc')

// 输出
<html>
  <head>
    <script></script>
  </head>
  <body>
        <ul class="testing">
          <li>aa</li>
          <li>bb</li>
          <li>cc</li>
        </ul>
  </body>
</html>

jade中block的使用

block的默认输出

html
    head
        script
    body
        block test
            p 哈哈哈
     
// 输出
<html>
  <head>
    <script></script>
  </head>
  <body>
    <p>哈哈哈</p>
  </body>
</html>

block的调用

html
    head
        script
    body
        block test
            p 哈哈哈
        block test
        block test
        block test

// 输出
<html>
  <head>
    <script></script>
  </head>
  <body>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
  </body>
</html>

⚠️block可以嵌套

jade使用extends和block实现继承

实例一：基础

// 新建一个文件extend.jade（被继承文件）
html
    head
        script
    body
        block desc // 定义block
            h4 继承 
        block test // 调用blcok(test)

// jade文件内容（继承文件）
extends extend.jade
block test // 定义block(test)
    p 哈哈哈
        
// 输出
<html>
  <head>
    <script></script>
  </head>
  <body>
    <h4>继承</h4>
    <p>哈哈哈</p>
  </body>
</html>

实例二：继承文件里的block会覆盖被继承文件里的block

// 继承文件
extends extend.jade
block test
    p 哈哈哈
    block desc
        h4 覆盖
        
// 被继承文件
html
    head
        script
    body
        block desc
            h4 继承
        block test

// 输出

<html>
  <head>
    <script></script>
  </head>
  <body>
    <h4>覆盖</h4>
    <p>哈哈哈</p>
    <h4>覆盖</h4>
  </body>
</html>

⚠️继承文件里的block必须在被继承文件里调用，否则不会输出，并且在继承文件中entends要和block同级

jade中的过滤（即使用插件语言less或sass或markdown等）

首先安装相应的插件语言

npm install less sass markdown

之后就可以在jade中使用less了，但不能在其中使用动态数据

style
    :less
        body{
            p{
               color:#ccc 
        }
    }

⚠️使用:less、:sass、:markdown等

额外内容

1、变量还是赋值

foo = "hello"
tmp = "world" + "!"

h1= foo
span= tmp

对于上面的代码，可能很多人第一眼看到都会有一个疑问，Jade怎么知道等号左边是变量名还是标签呢？
再仔细看看，很快就会发现，又是传说中的空格在作祟，变量后面等号前必须加空格，而标签直接接等号，不能加空格！

2、有三种方法可以原样输出文本，其中“|”和“.”有什么区分？
对于多行文本，如果同时具有子元素的话，使用.会导致无法识别子元素，故需要使用另一种标识符|，但在使用“.”时如果直接是以尖括号开头还是可以识别的

3、如果只有一个子元素，可以使用“:”来嵌套

ul#books
li: a(href="#book-a") Book A
li: a(href="#book-b") Book B

⚠️冒号后面一定要有空格

4、jade中可以对变量进行一些js操作

- var b = "hello"
p #{b.toUpperCase()} world

//编译的结果
<p>HELLO world</p>

5、jade中有四种赋值语句

=
#{}
!= (!=不是条件语句中的不等于逻辑运算符，而是非转义html)
!{} (非转义输出html)

6、想要输出"#"、"!"、"{}"，使用反斜线“”

div !{content}
div #{content}

// 输出
<div>!{content}{/div}
<div>#{content}{/div}

7、jade中的注释

“//”单行注释解析后

html
    head
        // 哈哈
        script
    body
        div(style=json)
        div(class=arr)
        div(class=arr class="active")
        div(class=arr)
        div(class=arr)

// 输出
<html>
  <head>
    <!-- 哈哈-->
    <script></script>
  </head>
  <body>
    <div style="200px;height:200px;background:red"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc active"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc"></div>
  </body>
</html>

⚠️单行注释要和下面的标签同级，否则下面的标签也会被注释

“//-”缓冲注释解析后不会显示，也就是不会输出

html
    head
    //- 
        script   
    body
        div(style=json)
        div(class=arr)
        div(class=arr class="active")
        div(class=arr)
        div(class=arr)

// 输出
<html>
  <head></head>
  <body>
    <div style="200px;height:200px;background:red"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc active"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc"></div>
  </body>
</html>

html
    head
        //- 哈哈
        script
    body
        div(style=json)
        div(class=arr)
        div(class=arr class="active")
        div(class=arr)
        div(class=arr)

// 输出
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div style="200px;height:200px;background:red"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc active"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc"></div>
  </body>
</html>

⚠️如果我们想要注释掉script，那么注释就不能与script同级，我们发现script和哈哈并没有输出，符合预期

“//”或“/-”块注释解析后

html
    head
        script
    //body
        div(style=json)
        div(class=arr)
        div(class=arr class="active")
        div(class=arr)
        div(class=arr)

// 输出
<html>
  <head>
    <script></script>
  </head>
  <!--body
  div(style=json)
  div(class=arr)
  div(class=arr class="active")
  div(class=arr)
  div(class=arr)
  -->
</html>

条件注释[if IE8]......[end if]

总结：

1、单行注释和多行注释都使用“//”，至于是单行还是多行取决于“//”所在的位置，在有子元素的标签前或嵌套该标签，那么就是块注释也就是多行注释，如果在子元素的前面或嵌套该子元素，并且该子元素没有子元素，那么就是单行注释

2、对于三种注释来说，如果和标签同级，那么不会注释掉任何标签，可以在里面写我们平时写的一些注释

参考：http://www.nodeclass.com/api/jade.html#includes