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. 寒冰王座[HDU1248]

    寒冰王座 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  2. 【BZOJ】1002: [FJOI2007]轮状病毒（DP+规律+高精度）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1002 其实我还是看题解的,而且看了题解也没明白那公式怎么来的T_T,先水过了先把....以后研究一下 ...

  3. JQuery获取和设置Select选项常用方法总结 (转)

    1.获取select 选中的 text: $("#cusChildTypeId").find("option:selected").text(); $(&quo ...

  4. 字符串分割与存入List集合

    List<string> namelist = new List<string>(); string[] namejh = null; string name= "张 ...

  5. python3环境搭建（CentOS7.2）

    安装python3(自动安装pip3):yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqli ...

  6. PDO常用方法及其应用

    PDO::query() 主要是用于有记录结果返回的操作,特别是SELECT操作 PDO::exec() 主要是针对没有结果集合返回的操作,如INSERT.UPDATE等操作 PDO::prepare ...

  7. 诅咒JavaScript之----ArcGIS JavaScript 点聚合 ClusterLayer

    对一个之前一直做winForm的 菜鸟来说,突然接触这么神奇的语言,基本上每天都会诅咒一下这门神奇的语言. 最近做了一个小网站,底图用的是天地图的服务,用ArcGIS JavaScript提供的一些G ...

  8. 如何用Apache POI操作Excel文件-----如何对一个单元格加注解？

    有的时候,我们需要通过操作Apache POI,在生成Cell数据的同时,能对其生成的Cell,加上注解(comments),类似于下面的. 那么对于这种情况,我们的代码应该如何写呢? 借花献佛,我就 ...

  9. 使用HIBERNATE的SQL查询并将结果集自动转换成POJO

    在某些场合下,我们可能想使用HIBERNATE的框架提供的SQL查询接口,但是,由于实体没有做映射,HIBERNATE不能把结果集转换成你想要的List<POJO>,本文讨论如何在这种情况 ...

  10. [听课笔记]Professor Michael Cusumano's New Book:" Strategy Rules: Five Timeless Lessons from Bill Gates, Andy Grove, and Steve Jobs"

    1. Look Forward, Reason Back Extrapolate, interpret, then tie vision to concrete actions2. Make Big ...