jade 中文文档

文本输出：

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

div 这是<b>一段</b>文本

输出：
<div>这是<b>一段</b>文本</div>

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

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

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

在模板中直接使用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

输出：
<li>item</li>
<li>item</li>
<li>item</li> 
<ul>我是UL</ul>

css样式输出

style.
     #id {display:none}
     .abc{display:block}

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

属性写法：

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

a(href='google.com', order_id=123) Google
a(class='button', href='google.com') Google

输出：
<a href="google.com" order_id=123>Google</a>
<a href="google.com" class="button">Google</a>

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

a#abc.btn.btn-red

输出：
<a id="abc" class="btn btn-red"></a>

属性内容用数组写入

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

输出：
<a class="foo bar baz"></a>
<a class="bing foo bar baz bing"></a>

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

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

输出：
<div id="foo" data-bar="foo" data-foo="bar"></div>

段落式写法：

input(
     type='checkbox'
     name='agreement'
     checked
)

输出：
<input type="checkbox" name="agreement" checked="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)


输出：
<input type="checkbox" checked="checked">
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="checkbox" checked="true">
<input type="checkbox">

行内属性使用JS：

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

输出：
<h1 data="零"></h1>

模板控制流：

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

if...else

case ...when...default

while....

each... in ...

下面给出各个例子：

if...else

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

输出
<div>不存在</div>

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

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

输出：
<p>一</p>

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

- var n = 0
ul
  while n < 4
    li= n++

输出：
<ul>
　　<li>0</li>
　　<li>1</li>
　　<li>2</li>
　　<li>3</li>
</ul>

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

1、没有key值

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

输出:
<ul>
　　<li>1</li>
　　<li>2</li>
</ul>
ps : 这种是没有key值

2、循环一个数组

ul
  each val, key in ['zero', 'one', 'two']
    li= key + ': ' + val

输出
<ul>
　　<li>0: zero</li>
　　<li>1: one</li>
　　<li>2: two</li>
</ul>

3、循环一个对象

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

输出：
<ul>
　　<li>one: 一</li>
　　<li>two: 二</li>
</ul>

文件引用操作：(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');

输出：

<!doctype html>
<html>
  <head>
    <style>
      h1 { color: red; }
    </style>
  </head>
  <body>
    <h1>My Site</h1>
    <p>Welcome to my super lame site.</p>
    <script>
      console.log('You are awesome');
    </script>
  </body>
</html>

extends...block...例子：

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

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

//- layout.jade
doctype html
html
  head
    block title
  body
    block content

//- index.jade
extends ./layout.jade
block title
  title Article Title
block content
  h1 My Article


输出：
<!doctype html>
<html>
  <head>
    <title>Article Title</title>
  </head>
  <body>
    <h1>My Article</h1>
  </body>
</html>

注释：(注释有3种)

// 行注释

输出：
<!-- 行注释 -->

//
    块注释
    第二行
输出：
 <!--
    块注释
    第二行
 -->

//- 不输出到页面
输出为空

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

doctype html

<!DOCTYPE html>

doctype xml

<?xml version="1.0" encoding="utf-8" ?>

doctype transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

doctype strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

doctype frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

doctype 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

doctype basic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

doctype mobile

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.

posted @ 2014-11-15 10:42 Kenway-Lau 阅读(785) 评论(0) 编辑收藏举报

刷新页面返回顶部

刘嘉威 - KenwayLau

jade 中文文档

公告