Jade是一款高性能简洁易懂的模板引擎，Jade是Html的Javascript实现，在服务端（NodeJS）及客户端均有支持。

一、功能

客户端支持 　　  超强的可读性 　　 灵活易用的缩进　　块扩展　　代码默认经过编码处理以增强安全性　　编译及运行时的上下文错误报告　　命令行编译支持　　HTML5模式

可选的内存缓存　　联合动态和静态标记类　　利用过滤器解析树的处理　　支持 Express　　利用each透明的循环objects,arrays甚至不可枚举对象　　块注释　　不需要标记前缀

AST过滤器　　 过滤器  ...

二、jade安装

npm install jade -g

jade -h

三、jade工具

推荐：online official

四、jade语法

4.1 标签

以p标签为例

p

会转换为：

<p></p>

jade能自动识别自闭和标签:

input

会转换为：

<input/>

4.2 文本

 4.2.1标签中添加文本

p 欢迎加入wandoujia-fe

会转换为：

<p>欢迎加入wandoujia-fe</p>

 

4.2.2 标签中嵌套标签

直接跟写html一样就行

p Welcome to wandoujia fe, we want <b>you</b>

会转换为：

<p>Welcome to wandoujia fe, we want <b>you</b></p>

 

4.2.3 标签中有大段的块内容

  • 方式一：在标签后面添加 "."

　　　比如一段js代码，注意是script后面有一个"."

script.

    console.log('Welcome to join wandoujia-fe')

    console.log('We want you')
  • 方式二：每段前面添加"|"
script

    | console.log('Welcome to join wandoujia-fe')

    | console.log('We want you')

转换结果：

<script>

    console.log('Welcome to join wandoujia-fe')

    console.log('We want you')

</script>

4.3 属性

以 ()来分割属性

a(rel="nofollow", href="http://www.wandoujia.com/join#getJobInfo=1") 招聘

会转换为：

<a rel="nofollow" href="http://www.wandoujia.com/join#getJobInfo=1">招聘</a>

4.4 注释

 4.4.1 单行注释

// changed by yc-team

会转换为：

<!-- changed by yc-team -->

 

4.4.2 多行注释

body

  //

      p 测试代码by yaochun

会转换为：

<body>

<!--p 测试代码by yaochun

-->

</body>

 4.4.3 不输出的注释

在单行注释上加一个短横线 -

//- 这段注释不会输出

p 文本测试by yaochun

会转换为：

<p>文本测试by yaochun</p>

注意： 很多文档里面提到的条件注释已经不再支持

4.5 doctype

添加一个doctype只需要doctype，然后再跟一个可选的值，默认是html

doctype html

会转换为：

<!DOCTYPE html>

注意：!!!这种简写的方式已经被抛弃了~

可选值还有：

  • xml
  • transitional
  • srict
  • frameset
  • 1.1
  • basic
  • mobile

4.6 设置id或class

标签后面跟上#id,.classname，如果没有标签则使用默认标签div

#content

p#info

a.btn

会转换为：

<div id="content"></div>

<p id="info"></p>

<a class="btn"></a>

4.7 1个id和多个class

连着写即可

a#download-btn.btn.blue-btn

会转换为：

<a id="download-btn" class="btn blue-btn"></a>

转自：http://www.w3cplus.com/html/jade.html

Jade模板引擎学习（一）安装及基本语法的更多相关文章

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

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

  2. Jade模板引擎学习（二）语法：代码、变量、循环、过滤器及mixin

    Jade语法 一.代码 不会被缓冲代码 ul - for(var i=0; i; i++) li Jade Engine 会转换为: <ul> <li>Jade Engine& ...

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

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

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

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

  5. Jade 模板引擎使用

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

  6. artTemplate模板引擎学习实战

    在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...

  7. NVelocity模板引擎学习笔记

    NVelocity模板引擎学习笔记 学习模板引擎有一段时间现在做一些总结

  8. Jade模板引擎使用详解

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

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

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

随机推荐

  1. 使用truffle测试部署合约

    truffle console let contract; contract=BloggerCoin.deployed().then(instance=>contract=instanc e);

  2. Java IO(文件操作工具类)

    FileOperate实现的功能: 1. 返回文件夹中所有文件列表 2. 读取文本文件内容 3. 新建目录 4. 新建多级目录 5. 新建文件 6. 有编码方式的创建文件 7. 删除文件 8. 删除指 ...

  3. 数组的引用——用作形参&返回类型时

    一.数组的引用 切入:可以将一个变量定义成数组的引用(这个变量和数组的类型要相同) 形式: int odd[5] = {1, 3, 5, 7, 9}; int (&arr)[5] = odd; ...

  4. Python学习之路3 - 字符串操作&字典

    本节内容: 常用的字符串处理. 格式化输出字符串. 字符串的替换. 字符串和二进制的相互转化. 字典的操作 字符串操作 常用的字符串处理 name = 'vector' print(name.capi ...

  5. Python学习之路2 - 列表和元组

    列表 概念:Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 列表的使用 names = ['zhangsan','lisi','wangwu' ...

  6. ACM 第九天

    动态规划1 动态规划问题是面试题中的热门话题,如果要求一个问题的最优解(通常是最大值或者最小值),而且该问题能够分解成若干个子问题,并且小问题之间也存在重叠的子问题,则考虑采用动态规划. 1.LLS ...

  7. 团队作业7——第二次项目冲刺（Beta版本)-第一篇

    1.当天站立式会议照片: 2.工作分工: 团队成员 分工 郭达22120 项目整合,后台代码 刘德培44060 数据库模块后台连接 石浩洋22061 前台界面优化 曾繁钦22056 前台界面优化.测试 ...

  8. spring ioc经典总结

    component-scan标签默认情况下自动扫描指定路径下的包(含所有子包),将带有 @Component @Repository @Service @Controller标签的类自动注册到spri ...

  9. Python使用又拍云进行第三方文件拉取

    在爬虫过程中,需要将图片或其他文件进行存储到云上,但在下载图片时,看官方文档,貌似需要先下载到后再上传又拍云,感觉效率很低下.经查找资料实现Python直接对第三方资源进行文件拉取操作,即不需要下载到 ...

  10. udp->ip & tcp->ip　发送数据包的目的地址的源地址是什么时候确定的？

    udp->ip & tcp->ip udp到ip层是:ip_send_skb tcp到ip层是: ip_queue_xmit 拿tcp为例,在使用[ip_queue_xmit, i ...