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. 递推DP URAL 1353 Milliard Vasya's Function

    题目传送门 /* 题意:1~1e9的数字里,各个位数数字相加和为s的个数 递推DP:dp[i][j] 表示i位数字,当前数字和为j的个数 状态转移方程:dp[i][j] += dp[i-1][j-k] ...

  2. MVC 路由模块分析（一）

    概述 主要分为四个部分进行分析. First ——Usage: then ——Extension: and then ——Design: last ——Test. 1. Usage 1.1 Displ ...

  3. reqSUB错误

    ---- ERROR ----    Error in dispatcher subroutine reqSUB: Invalid PAR(1): 0502 上面是用adams/ca加载一个汽车模型时 ...

  4. ural 1222. Chernobyl’ Eagles

    1222. Chernobyl’ Eagles Time limit: 1.0 secondMemory limit: 64 MB A Chernobyl’ eagle has several hea ...

  5. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  6. Codeforces Round #208 (Div. 2) A.Dima and Continuous Line

    #include <iostream> #include <algorithm> #include <vector> using namespace std; in ...

  7. COJ262 HDNOIP201206施工方案

    HDNOIP201206施工方案 难度级别:A: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 c国边防军在边境某处的阵地是由n个地堡组成的. ...

  8. NodeJS中form上传附件中针对表单的multiple attribute出现的问题总结

    在express中上传附件需要在表单中添加enctype="multipart/form-data"属性,并且在新的4.0.1版本中需要手动添加中间件app.use(connect ...

  9. android ScrollView滚动距离和判断滚动停止状态

    今天很高兴,自己解决了判断ScrollView滚动停止的监听,现在分享给大家. 因为ScrollView没有像listView中的setOnScrollListener()监听,当然也就没有SCROL ...

  10. 如何在URL筛选管理器中过滤不需要的URL

    互联网可以说是一把名副其实的双刃剑.一方面其可以提高工作效率.给企业提供充分的资源;另一方面如果管理不严,也会带来很多的隐患.如员工在上班时间玩游戏.炒股等等.为此现在很多企业希望对员工的网络行为进行 ...