jade基础

1、根据缩进，规定层级

2、属性放在（）里面，逗号分隔，内容空个格 直接往后堆

a(href="www.baidu.com", title="aaa") 百度
||
<a href="www.baidu.com">百度</a>

style属性与class属性比较特殊,也可以用如下写法：

div(style={background: res; width: 100px;})

div(class= ["aaa", "bbb"] class="active")  //可以放多个class，编译时会自动融合

3、class id 的简写

div.classname  === <div class="classname"></div>
div#id  ===  <div id="id"></div>

4、属性的特殊写法

div&attributes({title:'title', id='id'})

5、| 代表原样输出

html
  head
    body
      |abc

6、.代表所有的下一级的东西原样输出

html
  head
    script.
      window.onload = function() {...}
    body
      |abg

7、include引用, 不增加http请求数，直接编译到页面中

html
  head
    script
      include a.js
  body
    |abg

8、变量 #{}  内部也可以进行运算

html
  head
  body
    div 我的名字是 #{name}

ps: style 与 class  直接放入变量即可

9、 - 意味着我是一段代码

html
  head
  body
    -var a =1
    -var b = 2
    div #{a+b}
    div=a  === div #{a} 这两个写法是等价的

10、循环

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

11、! 代表 html 原样输出

content = “<a>dfsdf</a>”;

html
  head
  body
    div!=content

12、if 语句

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

13、类似于switch语句 。case when

html
  head
  body
  -var a =1
  case a
    when 0
      div aaa
    when 1
      div bbb
    default
      |不靠谱