jade和ejs很大的不同是通过缩进的方式解决嵌套和成对标签的问题，比较适合有代码洁癖的同学。

jade官方有基础的语法: http://naltatis.github.io/jade-syntax-docs/

安装jade

npm install -g jade

试用：

建立 test.jade

编译

jade test.jade 编译文件
jade -P test.jade 编译成带格式的html文件
jade -P -w test.jade 实时编译

唯一需要记住的就是用统一的缩进来嵌套标签。

jade

doctype html

对应html

<!DOCTYPE html>

jade创建一个列表

ul

  li Item A

  li Item B

  li Item C

对应html

<ul>

  <li>Item A</li>

  <li>Item B</li>

  <li>Item C</li>

</ul>

jade 设置id和class

#content

  .block

    input#bar.foo1.foo2

对应html

<div id="content">

  <div class="block">

    <input id="bar" class="foo1 foo2"/>

  </div>

</div>

jade注释

// 这个单行注释会输出到编译后的文件中

p 文本1

//

    这个多行注释会输出到编译后的文件中

    这个多行注释会输出到编译后的文件中

p 文本2

//-

    这个多行注释不会输出到编译后的文件中

    这个多行注释不会输出到编译后的文件中

p 文本3

对应html

<!-- 这个单行注释会输出到编译后的文件中-->

<p>文本1</p>

<!--

这个多行注释会输出到编译后的文件中

这个多行注释会输出到编译后的文件中

-->

<p>文本2</p>

<p>文本3</p>

在jade中填写属性：

input(type='checkbox', checked)

对应html

<input type="checkbox" checked="checked"/>

数据传递：

1、在文档中写json

- var course='mei'

h1 #{course}

对应html

<h1>mei</h1>

2、读取独立文件

tiny.json
{

    "course":"mei"

}

命令：jade test.jade -P -w -O tiny.json

对应html

<h1>mei</h1>

例子2：再复杂一点的json

{

          "movies": [{

            "title": "复仇者联盟2",

            "_id": 1,

            "poster": "http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg"

        },

        {

            "title": "复仇者联盟3",

            "_id": 2,

            "poster": "http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg"

        }

    ]

}

jade

ul

  each item in movies

    li

        a(href="/move/#{item._id}")

            img(src="#{item.poster}",alt="#{item.title}")

输出html

<ul>

  <li><a href="/move/1"><img src="http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg" alt="复仇者联盟2"/></a></li>

  <li><a href="/move/1"><img src="http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg" alt="复仇者联盟3"/></a></li>

</ul>

jade模板引擎的基本使用的更多相关文章

  1. Jade 模板引擎使用

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  2. jade模板引擎学习笔记（WebsStorm9.0.3+ nodejs+express+jade）

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  3. Express框架之Jade模板引擎使用

    日期:2018-7-8  十月梦想  node.js  浏览:2952次  评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...

  4. Jade模板引擎使用详解

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  5. Express全系列教程之(十)：jade模板引擎

    一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...

  6. nodejs jade 模板 引擎的使用方法

    1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...

  7. jade模板引擎

    最近用jade写了点东西,觉得挺有趣的,是一个有意思的模板引擎. 比如说,像这样的结构的html <span> <i class="icon-edit">& ...

  8. Express开发实例(2) —— Jade模板引擎

    前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...

  9. 初次入坑jade模板引擎（一）

    最近由于工作需要全栈开发,nodejs做后端,在写一个后台管理系统的时候,我一直在考虑用怎样的方式去写,尝试过依然采用前后端分离的结构.使用json数据进行数据交互的模式,但是尝试过才知道,真的很花时 ...

  10. Jade模板引擎学习（一）安装及基本语法

    Jade是一款高性能简洁易懂的模板引擎,Jade是Html的Javascript实现,在服务端(NodeJS)及客户端均有支持. 一.功能 客户端支持  超强的可读性 灵活易用的缩进 块扩展 代码默认 ...

随机推荐

  1. POJ1201 Intervals（差分约束系统）

    与ZOJ2770一个建模方式,前缀和当作点. 对于每个区间[a,b]有这么个条件,Sa-Sb-1>=c,然后我就那样连边WA了好几次. 后来偷看数据才想到这题还有两个隐藏的约束条件. 这题前缀和 ...

  2. ural 1431. Diplomas

    1431. Diplomas Time limit: 1.0 secondMemory limit: 64 MB It might be interesting for you to learn th ...

  3. BZOJ3839 : [Pa2013]Działka

    对于每个询问,首先可以通过扫描线+线段树求出四个方向的第一个点,询问范围等价于框住这些点的最小矩形. 对于一个点$i$,预处理出: $A[i][j]$:$i$往左下角按凸壳走到$j$时,凸壳上相邻两点 ...

  4. BZOJ3821 : 玄学

    对操作建立线段树,每个节点维护一个有序的操作表,表示用$[l,r]$的操作在每段区间上的作用效果. 对于一个线段树节点,合并左右儿子信息只在该区间刚刚被填满时进行,利用归并排序,时间复杂度为$O(n\ ...

  5. COJ983 WZJ的数据结构（负十七）

    显然是动态树裸题:O(mlogn) #include<cstdio> #include<cstring> #include<algorithm> #include& ...

  6. ArcEngine开发异常:无当前记录

    使用 IFeatureWorkspace.CreateFeatureClass() 方法,出现异常:无当前记录 百度/谷歌没有找到合适的解决之道. 而是用IFeatureWorkspace.Creat ...

  7. 菜刀轻松砍杀安全狗 asp一句话中转脚本

    看到很多朋友看了我的PHP中转脚本http://phpinfo.me/2014/02/01/309.html ,问我那个脚本只能中转PHP的,但是asp的呢 asp连接的时候安全狗拦截的正是菜刀POS ...

  8. UVa 11624 Fire!（BFS）

    Fire! Time Limit: 5000MS   Memory Limit: 262144KB   64bit IO Format: %lld & %llu Description Joe ...

  9. 将JsonObject转换成HashMap

    1.工具类: Utils.class: (1)简单的键值对map public class Utils { public static String getRaw(Context context, i ...

  10. 未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序。

    笔记本装的是windows 7旗舰版64位系统,使用的是MS Office 2007(Microsoft.ACE.OLEDB.12.0,32位程序),开发用的是Visual Studio 2010,我 ...