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. 最短路(Dijkstra) POJ 1062 昂贵的聘礼

    题目传送门 /* 最短路:Dijkstra算法,首先依照等级差距枚举“删除”某些点,即used,然后分别从该点出发生成最短路 更新每个点的最短路的最小值 注意:国王的等级不一定是最高的:) */ #i ...

  2. ZOJ3228 Searching the String（AC自动机）

    题目大概是给一个主串,询问若干个模式串出现次数,其中有些模式串要求不能重叠. 对于可以重叠的就是一个直白的多模式匹配问题:而不可重叠,在匹配过程中贪心地记录当前匹配的主串位置,然后每当出现一个新匹配根 ...

  3. Origami

    Origami 是一个来自 Facebook 设计团队的作品,是 Quartz Composer 的免费工具包,可在无需编程的情况下轻松实现与设计原型进行交互.

  4. Codeforces Round #199 (Div. 2) A Xenia and Divisors

    注意题目的数字最大是7 而能整除的只有 1,2,3,4,6,故构成的组合只能是1,2,4 或1,2,6或1,3,6,故分别统计1,2,3,4,6的个数,然后再分配 #include <iostr ...

  5. 【BZOJ】1269: [AHOI2006]文本编辑器editor（Splay）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1269 这题RE2次啊,好不爽啊,我一直以为是splay的问题,其实是数组开小了......(我老犯这 ...

  6. 【Vijos】1792 摆花

    题目链接:https://vijos.org/p/1792 算法:DP 看到这题真的一点不会...只能爆搜一下..但太太慢了..看了题解后,听说是分组背包??不知道.. 好吧,,还是百度了下题解,渐渐 ...

  7. HDU 2852 KiKi's K-Number(离线+树状数组)

    题目链接 省赛训练赛上一题,貌似不难啊.当初,没做出.离线+树状数组+二分. #include <cstdio> #include <cstring> #include < ...

  8. Get the log from android device

    Theme: How to get the log from device ?  Detail:  Get the log from device, and write to the local fi ...

  9. thinkphp框架中session常识

    在看别人代码时候,发现他,在tp框架中使用session没有些session_start();然后我去查看了手册初始化设置方法 无需手动调用,在App类的初始化工作结束后会自动调用,通常项目只需要配置 ...

  10. centos fastdfs 多服务器 多硬盘 多组 配置详解

    说正文前,先感谢happy_fish100提供的fastdfs,轻量级的分布式文件服务器. 随着用户量的变大,图片,视频等的量会不断的增大,这个时候一个硬盘可能不够用了,就要加硬盘.硬盘加不了时,就要 ...