模板引擎Jade详解

OccamsRazor 2017-12-12

有用的符号:

| 竖杠后的字符会被原样输出
· 点表示下一级的所有字符都会被原样输出,不再被识别。(就是|的升级版,实现批量)
include 表示引用外部文件

  • 短杠说明后面跟着的字符只是一段代码(与|的区别就是,|后面的内容会被显示,而短杠后面的内容直接不显示了!)

例子:

js:

const jade = require('jade');
console.log(jade.renderFile('./xxx.jade',{pretty:true,name:'singsingasong'}))

jade:

'|'的应用

模板引擎Jade详解

'.'的应用

模板引擎Jade详解模板引擎Jade详解

include的应用

模板引擎Jade详解

调用变量做运算

模板引擎Jade详解

div的class

模板引擎Jade详解

'-' 的应用

模板引擎Jade详解

变量的直接引用

span#{a}span=a效果是一样的。

jade中的for循环

jade:

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

js文件:

console.log(jade.renderFile('./views/11.jade',{pretty:true,name:'singsingasong',
    arr:['aaa','bbb','ccc','ddd']
}));

运行结果:
模板引擎Jade详解

'!' 的应用

html
  head
  body
    div(class='1')!=content
    div(class='2')

运行结果:
模板引擎Jade详解

jade的if...else...

html
  head
  body
    -var a=19;
    if(a%2==0)
      div(style={background:'red'}) 偶数
    else
      div(style={background:'green'}) 奇数
模板引擎Jade详解

case语句

html
  head
  body
    -var a=1;
    case a
      when 0
        div aaa
      when 1
        div bbb
      when 2
        div ccc
      default
        |不靠谱
模板引擎Jade详解

综合的来一个

小提示:之前的jade文件我们都没有写DOCTYPE,这里给它加上

模板引擎Jade详解
这个执行结果的是:如果文件读写顺利就输出‘成功’,如果出错,就返回‘错误’。

相关推荐