模板引擎-jade模板库-2

jade模板库2（高级语法、简单实例）

  1. jade能自动识别单标签
  2. 4种让内容原样输出的方式
      * 元素与内容间空个格，直接往后堆(jade模板1中已讲)
      * "|"竖线能让内容原样输出
      * 在元素后面加上"."表示元素的下一级内容全都原样输出
      * 使用"include"关键字让内容原样输出]
  3. jade中使用变量
  4. 在代码前加"-"可在jade中直接定义js（第一行加了"-"，后面的代码前可省略"-"）
  5. 在jade中用for循环输出内容
  6. 在jade中输出html内容，在"=号前加上"!"表确认
  7. jade实例

4种让内容原样输出的方式

2. "|"竖线能让内容原样输出：

例如，在2.jade文件中写入：

html
  head
    script
      |window.onload = function(){
          |var oBtn = document.getElementById('btn1');
          |oBtn.onclick = function(){
              |alert('aaa');
          |}
      |}
  body
    |abc
    |111

在js文件中编译文件：

const jade = require('jade');
console.log(jade.renderFile('./views/2.jade',{pretty:true}));

3. 在元素后面加上"."表示元素的下一级内容全都原样输出

例如，在jade文件中写入：

html
  head.
    div
  body.
    123
    456

4. 使用"include"关键字让内容原样输出

例如，在a.js文件中写入：

window.onload = function(){
    var oBtn = document.getElementById('btn1');
        oBtn.onclick = function(){
            alert('aaa');
        }
}

然后在.jade文件中引入：

html
  head
    script
      include a.js
  body
    |111
    |222