Jade学习笔记

1. controller 的部分都是直接写的，

例子1：

<p>Hello, World!</p>

变成这样 ： p Hello, World!

例子2：

<p></p>
<div></div>
<h1></h1>

变成这样：

p
div
h1

2. controller 里面的属性设置：id 用'#'， class用'.' ，其他属性用‘（）’包起来。

例子1：

<p id="header"></p>

变成这样

p#header

例子2：

<p class="notice"></p>

变成这样：

p.notice

例子3：

<input type="text" name="login"/>

变成这样：

input(type="text", name="login")

例子4：

<element xmlns:foo="bar"></element>

变成这样：

element(xmlns:foo="bar")

其中如果控件使用的是div， div可以省略。

例子3：

<div id="menu" class="column"></div>

变成这样：

#menu.column

3.如果控件里面嵌套了控件，用新的一行代表嵌套，最好缩进。

<div>
  <p>hi</p>
</div>

变成这样：

div
p hi

如果不用新的一行代表嵌套，就用‘：’在同一行代表嵌套

变成这样：

div: p hi

4. 关于变量赋值，逻辑实现。关键字：‘var’  '=' ; 涉及到迭代的用 'for' 'each'； 涉及到条件判断的用‘if’ 'else' 'unless'

<p>Awesome</p>

变成这样：

- var language = "Jade"
if language == "Jade"
p Awesome
else
p Not awesome

或者变成这样//输出else部分：

- var language = "FooLang"
unless language == "Jade"
p Not Awesome

5. 关于继承。父文件关键字'block',子文件关键字'extend'

// base.jade
h1 Hello from the base
block content

// child.jade
extends base
block content
    p This is the child's content

例子2：

// base.jade
h1 Hello from the base
block content
    p Welcome

// child.jade
extends base
block append content
    p And goodbye

6.关于代码片段的公用，用‘include’

// widget.jade
.widget
    p The weather is sunny today

// page.jade
p I wonder what the weather is like today?
include widget

相当于：

p I wonder what the weather is like today?
.widget
p The weather is sunny today

等价于：

<p>I wonder what the weather is like today?</p>
<div class="widget">
  <p>The weather is sunny today</p>
</div>

 7.一系列文件头的短写。。。。自己查吧，这个。