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. 简单几何(求交点) UVA 11437 Triangle Fun

    题目传送门 题意:三角形三等分点连线组成的三角形面积 分析:入门题,先求三等分点,再求交点,最后求面积.还可以用梅涅劳斯定理来做 /********************************** ...

  2. ZOJ 3911 Prime Query ZOJ Monthly, October 2015 - I

    Prime Query Time Limit: 1 Second      Memory Limit: 196608 KB You are given a simple task. Given a s ...

  3. php 即使客户端或者服务器断开(如关掉浏览器)脚本也可以继续执行

    <?php ignore_user_abort(); // run script in background set_time_limit(0); // run script forever $ ...

  4. Git 的使用感受

    Git 的使用感受 从开始工作到现在,在公司里面一直用 svn 来做版本管理.大约半年前听说了 Git,因为 Git 的光辉相当耀眼,作者是 Linus Torvalds,被大量的开源软件采用,如 j ...

  5. thinkphp模板中foreach循环没数据的错误解决

    从控制器方法中$this->assign();函数将值传递给html模板 但是模板不显示数据,直接出来的是代码,效果就和html中写了php代码不能解析一样. 原来是我将thinkphp框架的引 ...

  6. graph | Max flow

    最大流算法,解决的是从一个起点到一个终点,通过任何条路径能够得到的最大流量. 有个Edmond-Karp算法: 1. BFS找到一条增广路径:算出这条路径的最小流量(所有边的最小值)increase: ...

  7. Repair duplicate IDs on cloned Endpoint Protection 12.1 clients

    https://support.symantec.com/en_US/article.TECH163349.html

  8. CKEditor的使用-编辑文本

    官网下载以及演示:http://ckeditor.com/ 引入js <script src="/Example6/ckeditor/ckeditor.js">< ...

  9. http响应报文和http请求报文 详细信息

    tomcat项目本身的jar包

  10. ECSHOP二次开发指南

    ECSHOP二次开发指南 发布时间:2013-05-28 12:47:00   来源:   评论:0 点击: 次 [字号:大 中 小] QQ空间新浪微博腾讯微博人人网豆瓣网百度空间百度搜藏开心网复制更 ...