编写

简单例子

doctype html

html

  head

    title learn jade

  body

    h1 learn jade

常用命令

  • 编译: jade index.jade //默认编译成压缩后的html文件
  • 排版编译: jade -P index.jade
  • 实时检测: jade -w index.jade / `jade -P -w index.jade

声明文档：

  • jade html,
  • jade strict,
  • jade frameset,
  • jade xml

格式：

  • 子级缩进两格，
  • 标签与文本空一格,
  • 标签加文本和文本换行:
    <div>

      a

      b c<span>d</span>e

      f

    </div>


 div a

     |b c

     span d

     |e

     |f


div.

   a

   b c <span>d</span> e

   f

添加属性 ：

  • h1(class="a b", id="c", other="value") ;
  • id与class可以放在外面: h1.a.b#c(other="value") 这种情况下如果没有写标签，默认为div;

注释

  • 一般注释: \\ 注释在标签前面，包括子元素在内都会被注释； 如果这行文本不属于标签，者注释这行文本
  • 缓冲注释：\\- 编译的时候直接省略

样式和脚本

//注意空两格

style.

  body{color:red}

script.

  var a = 1;

添加变量

  • 模版内部 //如果与外部部定义的变量相同，内部优先
body

  - var name = 'value'

  div(id='#{name}') #{name.toUpperCase()} 

//下面等号中不能再加文本; 上面的方式没定义变量输出undefined,下面则留空

body

  - var name = "value"

  div(id=name)= name

//

<body>

  <div id="value">VALUE </div>

</body>

  • 命令行传入 jade index.jade -P -w --obj '{"name": "value"}'

  • json文件外部传入 jade index.jade -P -w -O index.json

  • 模版外部

变量转义

  • jade 会默认进行变量转义
  • 非转义输出: !#{}或!=;
  • 利用反斜杠：
- var data = 'a'

p \#{data}

//

p #{data}

语句 //注意空格层级别

  • for
 - var name = {name1: 'value1', name2: 'value2', name3: 'value3'}

 - for(k in name)

   p #{k}: #{name[k]}
  • each
//object

 - var name = {name1: 'value1', name2: 'value2', name3: 'value3'}

 - each  value, key in name

    p #{key}: #{value}

//arrasy

 - var name = {name1: 'value1', name2: 'value2', name3: 'value3'}

 - for(k in name)

   p #{k}: #{name[k]}  

//层叠

- var name = [{id:1, items:['a','b','c']},{id:2, items:['d','e','f']}]

- each section in name

   p=section.id

     each item in section.items

       span=item
  • while
- var n = 0

ul

  while n < 4

    li= n++
  • if
- var lessons = ['jade','node']

if lessons

  if lessons.length > 1

    p #{lessons.join(',')}

      else

        p lessons'length less than 1

  else

    p no lessons
  • unless; //if的反转
  • switch
- var name = 'jade'

case name

  when 'jade': p #{name} is jade

  when 'node': p #{name} is node

mixin

  • 重复和嵌套
    mixin study(name, courses)

      p #{name} study

      ul.courses

        each course in courses

          li= course

    mixin group(student)

      h4 #{student.name}

      +study(student.name, student.courses)

    +group({name:'tom',courses:['jade','node']})

    +group({name:'jack',courses:['java','express']})
  • block代码块
    mixin team(slogon)

      h4 #{slogon}

      if block

        block

      else

        p no team

    +team('slogon')

      p Good job!

//结果

    <h4>slogon</h4>

    <p>Good job!</p>
  • 传递属性
    mixin attr(name)

      p(class!=attributes.class) #{name}

    +attr('attr')(class='magic')

//结果

<p class="magic">attr</p>

//

    mixin attrs(name)

      p&attributes(attributes) #{name}

    +attrs('attrs')(class='magic2', id='attrid')

//结果

<p id="attrid" class="magic2">attrs</p>

//在不确定传入参数个数

mixin attrs2(name, ...items)

      ul(class!=name)

        each item in items

          li= item

+attrs2('node','jade','express')

jade学习01的更多相关文章

  1. Python学习--01入门

    Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...

  2. Java虚拟机JVM学习01 流程概述

    Java虚拟机JVM学习01 流程概述 Java虚拟机与程序的生命周期 一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这 ...

  3. Android Testing学习01 介绍 测试测什么 测试的类型

    Android Testing学习01 介绍 测试测什么 测试的类型 Android 测试 测什么 1.Activity的生命周期事件 应该测试Activity的生命周期事件处理. 如果你的Activ ...

  4. Java学习01

    Java学习01 第一章 1.JRE与JDK JDK(JAVA Develop Kit,JAVA开发工具包)提供了Java的开发环境和运行环境,主要用于开发JAVA程序,面向Java程序的开发者; J ...

  5. ThinkPhp学习01

    原文:ThinkPhp学习01 一.ThinkPHP的介绍           MVC  M - Model 模型                工作:负责数据的操作  V - View  视图(模板 ...

  6. 【iScroll源码学习01】准备阶段 - 叶小钗

    [iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3 ...

  7. JVM学习01：内存结构

    JVM学习01:内存结构 写在前面:本系列分享主要参考资料是  周志明老师的<深入理解Java虚拟机>第二版. 内存结构知识要点Xmind梳理 案例分析 分析1 package com.h ...

  8. webservice学习01：wsdl文档结构

    webservice学习01:wsdl文档结构 wsdl文档结构 WSDL文档示例 <wsdl:definitions xmlns:xsd="http://www.w3.org/200 ...

  9. spring学习(01)之IOC

    spring学习(01)之IOC IOC:控制反转——Spring通过一种称作控制反转(IOC)的技术促进了低耦合.当应用了IOC,一个对象依赖的其它对象会通过被动的方式传递进来,而不是这个对象自己创 ...

随机推荐

  1. 【编程题目】和为 n 连续正数序列

    51.和为 n 连续正数序列(数组).题目:输入一个正数 n,输出所有和为 n 连续正数序列.例如输入 15,由于 1+2+3+4+5=4+5+6=7+8=15,所以输出 3 个连续序列 1-5. 4 ...

  2. SQL常用命令整理

    1.增加字段 alter table docdsp     add dspcodechar(200)2.删除字段     ALTER TABLE table_NAME DROP COLUMNcolum ...

  3. Get与Post数据长度的限制

    这个问题在我的开发中也遇到,所以在此贴出来(也是在网上搜出来的,呵呵)这是原贴地址http://blog.csdn.net/somat/archive/2004/10/29/158707.aspx两个 ...

  4. ！struct operator reload

    struct t3DObject //对象信息结构体{ int numOfVerts; // 模型中顶点的数目 int numOfFaces; // 模型中面的数目 int numTexVertex; ...

  5. C 工厂模式 还有其他的模式

    http://blog.csdn.net/feixiaoxing/article/details/7081243

  6. HTTP协议/RTSP协议/RTMP协议的区别

    RTSP. RTMP.HTTP的共同点.区别 共同点: 1:RTSP RTMP HTTP都是在应用应用层. 2: 理论上RTSP RTMPHTTP都可以做直播和点播,但一般做直播用RTSP RTMP, ...

  7. 聊聊Android的APK反编译

    上一篇<How To Use Proguard in Android APP>介绍了如何对Android进行混淆,现在来对它进行反编译看看,里面有些什么东西. APK文件,其实也是一个压缩 ...

  8. hdu 2476 String Painter

    第一道区间dp题,感觉题意不是很好理解 题意:一次可以转换某一个位置的字符,或是一串连续的字符,举第一个例子zzzzzfzzzzz 1:aaaaaaaaaaa 2: abbbbbbbbba 3: ab ...

  9. Clr Via C#读书笔记----基元线程同步构造

    线程文章:http://www.cnblogs.com/edisonchou/p/4848131.html 重点在于多个线程同时访问,保持线程的同步. 线程同步的问题: 1,线程同步比较繁琐,而且容易 ...

  10. Sphinx的介绍和原理探索

    What/Sphinx是什么 定义 Sphinx是一个全文检索引擎. 特性 索引和性能优异 易于集成SQL和XML数据源,并可使用SphinxAPI.SphinxQL或者SphinxSE搜索接口 易于 ...