模板引擎:jade

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-07-03

jade：破坏式、侵入式、强依赖，用了这个就无法使用原生的HTML、CSS。

安装：npm install jade

1.根据缩进划分层级

2.属性用()表示，用逗号分隔

3.自动识别单双标签

4.所有的自定义标签都是双标签

使用：

const jade = require('jade');

var str1 = jade.render('html');
console.log(str1); // <html></html>

var str2 = jade.renderFile('./demo2.jade', {pretty: true}); // pretty 美化输出，分行 空格
console.log(str2);

// 可以直接转换成html
fs.writeFile('./demo2jade.html', str2, function (err, result) {
  if (err) {
    console.log('写入失败');
  } else {
    console.log('写入成功');
  }
})

jade语法：

1、根据缩进划分层间，在标签之后()添加属性。

html
  head
    style
    script(src="a.js")
    link(href="a.css",ref="stylesheet")
  body
    div
      ul
        li
          input(type="text",id="txt1",value="hello")
        li
    div

2、 内容：空一格后直接写，需要注意的是，script后的代码需要连写不能换行。

html
  head
    style
    script console.log('test')
  body
    a(herf="https://www.baidu.com/") 百度
    div 我是div1

3、标签style属性的两种写法，可以写成对象形式。

html
  head
    style
  body
    div(style="width:200px;height:200px;background:red;")
    div(style={width:'200px', height: '200px', background: 'pink'})

4、class属性的两种写法，可以写成数组形式。

html
  head
    style
  body
    div(class="aaa bbb left")
    div(class=['aaa', 'bbb', 'left'])

5、id和class属性的简写。

html
  head
    style
  body
    div.box
    div#box2
    div.box3(title="bar")

6、属性也可以采用对象的形式书写，需要加&attributes()

html
  head
    style
  body
    div.box3(title="bar")
    div&attributes({title:"foo",id:"box4"})

7、原样输出：可用| 来表示原样输出，不加竖线会被解析成标签的（bbb），加竖线代表原样输出（aaa），也可以用来换行输出。

html
  head
    style
    script
      | window.onload = function() {
      |   console.log('test');
      | }
  body
    | 上面提到过 内容是加空格之后并行连写，要换行写的话需要加竖线
    | aaa
    bbb

也可用在标签之后加.来代替竖线的原样输出。

html
  head
    style
    script.
      window.onload = function() {
        console.log('test');
      }
  body.
    aaa
    bbb

8、使用include引入外部文件。

html
  head
    style
    script
      include ./test.js
  body.
    加点直接原样输出

9、使用变量

// 使用的时候，变量使用选项的第二个参数传入
const jade = require('jade');

var str = jade.renderFile('./demo.jade', {pretty: true, name: 'jack', a: 12, b: 5, c:'3'});
console.log(str);

在jade中使用变量： #{name}，还可以运算#{a+b}，也使用=号来直接将变量当做内容 不需要在写#{}

html
  head
  body
    div 我的名字：#{name}
    div 运算 a + b = 12 + 5： #{a + b}
    div 运算 a + c = 12 + '3'： #{a + c}
    div=a
      span=b

使用变量来代替属性值：

var str = jade.renderFile('./demo.jade', {
  pretty: true, 
  styleJson: {width:'200px',height:'200px'}, 
  classArr:['aaa', 'active']
});
console.log(str);

html
  head
  body
    div(style=styleJson)
    div(class=classArr)

在jade中直接使用变量，使用-代表后面输入的是代码。

html
  head
  body
    - var a = 1;
    - var b = 2;
    div 结果 #{a+b}

10、使用for循环：

var str = jade.renderFile('./demo.jade',{pretty: true,
  arr: ['aaa', 'bbb', 'ccc']
})

html
  head
  body
    div
      -for(var i = 0; i < arr.length ; i++)
        div=arr[i]

11、使用!=来将html字符串非转义输出，直接接着空格后面书写会被转义。

var str = jade.renderFile('./demo.jade',{
  pretty: true,
  content: '<h2>我是title</h2><p>我是内容</p>'
})

html
  head
  body
    div!=content

12、使用if、else，

html
  head
  body
    - var a = 12;
    - if(a%2 ==0)
      div(style={background:'red'})
    - else
      div(style={background:'green'})

13、使用switch语法，在jade直接用case和when。

html
  head
  body
    - var a = 2;
    case a
      when 0
        div aaa
      when 1
        div bbb
      when 2
        div ccc
      default
        div 默认值