编写

简单例子

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. Gson解析复杂的json数据

    最近在给公司做一个直播APK的项目,主要就是通过解析网络服务器上的json数据,然后将频道地址下载下来再调用Android的播放器进行播放,原先本来打算使用普通的json解析方法即JsonObject ...

  2. 【jquery】一个简单的单选、多选、全选、反选、删除的小功能

    对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...

  3. MFC 使用MFC EditBrowse Control控件选择文件或者文件夹

    从工具箱中拖拽一个MFC EditBrowse Control到窗体中, 通过设置“Browse Mode”属性指定“文件浏览”还是“文件夹浏览” 可以通过添加对象的方式将其与一个CString se ...

  4. python基础——使用模块

    python基础——使用模块 Python本身就内置了很多非常有用的模块,只要安装完毕,这些模块就可以立刻使用. 我们以内建的sys模块为例,编写一个hello的模块: #!/usr/bin/env ...

  5. springmvc上传List,

    @RequestMapping("pay") public ModelAndView pay(String orderNo, TransactionDTO transaction, ...

  6. 复制Informational constraints on LUW DB2 v105

    An informational constraint is a constraint attribute that can be used by the SQL compiler to improv ...

  7. spring刚开始学习搭建

    下载的软件包地址: http://repo.springsource.org/libs-release-local/org/springframework/spring 用maven进行快速开始: h ...

  8. Sublime Text 无法使用Package Control的解决方法 以及 常用的插件安装过程

    大概一个月之前给 Macbook air 装 Sublime Text 3 的时候,遇到过这个问题,当时解决了,现在回想,感觉忘的七七八八了,赶紧趁着还没有全忘光的时候记下来,当时的过程记得不一定准确 ...

  9. mysql列类型

    mysql三大列类型 整型 tinyint(占据空间:1个字节 存储范围  有符号  -128-127   无符号  0-255) smallint   mediumint    int    big ...

  10. php 分页

    分页类 <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 private ...