文本输出：

最简单的方式：在一个元素打一个空格 表示后面的是文本的内容，用时也支持原HTML输出

div 这是一段文本

输出： 
     
      这是
      一段文本
     

 

JS代码标签形式输出：(也就是script后面加个. 后面和正常一样，注意缩进)

script.　　var a = 'demo';   console.log(a); 输出： 

 

在模板中直接使用JS：

用 " - " 号表示开始，但仅在当前这行有效，下一行表示要操作的内容，下面的例子可以看出 4 个知识点

1. 多行JS，需要每一行都要打一个 " - " 号

2. if 那行不用带 - 号，因为if是jade的关键字，所以不用。

3. 在文本中如何调用JS变量，需要用 #{ 变量 }

4、一个JS模块的范围是靠依靠缩进: 下面的li是在for的"子级"，所以是for范围内，ul和for循环是同级关系，所以不在for的范围内。

- for (var x = 0; x < 3; x++) 　　-console.log(x); 　　if(x == 2) 　　　　span 我的索引是 #{x} 　　li item ul 我是UL 输出： 
item
 
item
 
item
  
     
      我是UL
     

 

css样式输出

style.     #id {display:none}     .abc{display:block} 输出： 

 

属性写法：

·描述：用jade写html的行内属性，使用()，注意()要紧贴元素名,否则当普通文本处理

a(href='google.com', order_id=123) Googlea(class='button', href='google.com') Google 输出： Google Google

 

class、id属性的快速写法：(#代表id，.代表class，可以连写)

a#abc.btn.btn-red 输出： 

 

 

属性内容用数组写入

- var classes = ['foo', 'bar', 'baz']a(class=classes)a.bing(class=classes class=['bing']) 输出：  

 

 

读取外部属性结构：&attributes 是关键字，类似JQ的attr

- var attributes = {'data-foo': 'bar'};div#foo(data-bar="foo")&attributes(attributes) 输出： 
     

 

 

段落式写法：

input(     type='checkbox'     name='agreement'     checked) 输出： 

 

属性真假值写法：

input(type='checkbox', checked)input(type='checkbox', checked=true)input(type='checkbox', checked=false)input(type='checkbox', checked=true.toString()) input(type='checkbox', checked=undefine)

输出：     

 

行内属性使用JS：

-var a = {}-a.status = 0h1(data =(a.status == 0 ? "零" : "非零")) 输出： 

 

 

 

模板控制流：

控制流就是各种判断操作，其中控制流也是模板的关键字。控制流有以下4种：

if...else

case ...when...default

while....

each... in ... 

下面给出各个例子：

if...else

-var a = false    if a        div 存在    else        div 不存在 输出 
     
      不存在
     

 

 

case(变量)...when(预想值)...default(全都不中值) (这个类似js 的 switch，只不过是多了个when，case换了个位置)

- var friends = 1    case friends      when 0: p 零      when 1: p 一      default: p 其他 输出： 
一

 

 

while(判断条件)...  （当循环）

- var n = 0ul  while n < 4    li= n++ 输出： 
     
       　　
      
0
 　　
      
1
 　　
      
2
 　　
      
3
 
     
 

 

 

each... in ...  （也就是for循环，使用起来比较方便，主要写法有3种）

1、没有key值

ul  each val in [1, 2]    li= val

输出: 
     
       　　
      
1
 　　
      
2
 
     
 ps : 这种是没有key值

2、循环一个数组

ul  each val, key in ['zero', 'one', 'two']    li= key + ': ' + val 输出 
     
       　　
      
0: zero
 　　
      
1: one
 　　
      
2: two
 
     

 

 3、循环一个对象

ul　　each val, key in {one:'一',two:'二'}   li= key + ': ' + val 输出： 
     
       　　
      
one: 一
 　　
      
two: 二
 
     

 

文件引用操作：(jade的文件引用主要有)

includes ...  (直接引入)

extends...block...（这个也就是看词填空）

extends...block append/prepend (向后或向前插入，类似JQ的append/prepend)

 

includes ... (引入文件，则是填写路径，支持css，js等文本)

doctype html    html      head        style          include style.css      body        h1 My Site        p Welcome to my super lame site.        script          include script.js       //- style.css    h1 { color: red; }        //- script.js    console.log('You are awesome'); 输出：

      
My Site
 
Welcome to my super lame site.
   

 

 

extends...block...例子 ： 

步骤：1、在layout.jade设好要填的空  （设key）

　　　2、在index.jade先引入layout.jade，再把layout.jade的空填上，相当于key和val的关系 （设val）

//- layout.jadedoctype htmlhtml  head    block title  body    block content//- index.jadeextends ./layout.jadeblock title  title Article Titleblock content  h1 My Article输出：              
My Article
  

 

 

 

 

 注释：(注释有3种)

// 行注释输出：
     //    块注释    第二行输出： 
     //- 不输出到页面输出为空

 

 

doctype ： 这是一个快捷关键字，输出常用的文档标记，具体如下：

doctype html

doctype xml

doctype transitional

doctype strict

doctype frameset

doctype 1.1

doctype basic

doctype mobile