Jade是一款高性能简洁易懂的模板引擎，Jade是Html的Javascript实现，在服务端（NodeJS）及客户端均有支持。
一、功能
客户端支持 超强的可读性 灵活易用的缩进 块扩展 代码默认经过编码处理以增强安全性 编译及运行时的上下文错误报告 命令行编译支持 HTML5模式
可选的内存缓存 联合动态和静态标记类 利用过滤器解析树的处理 支持 Express 利用each透明的循环objects,arrays甚至不可枚举对象 块注释 不需要标记前缀
AST过滤器 过滤器 ...
二、jade安装
npm install jade -g
jade -h
三、jade工具
四、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模板引擎学习（一）安装及基本语法的更多相关文章
-
jade模板引擎学习笔记（WebsStorm9.0.3+ nodejs+express+jade）
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
-
Jade模板引擎学习（二）语法：代码、变量、循环、过滤器及mixin
Jade语法 一.代码 不会被缓冲代码 ul - for(var i=0; i; i++) li Jade Engine 会转换为: <ul> <li>Jade Engine& ...
-
Express框架之Jade模板引擎使用
日期:2018-7-8 十月梦想 node.js 浏览:2952次 评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...
-
Express全系列教程之(十)：jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
-
Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
-
artTemplate模板引擎学习实战
在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...
-
NVelocity模板引擎学习笔记
NVelocity模板引擎学习笔记 学习模板引擎有一段时间现在做一些总结
-
Jade模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
-
nodejs jade 模板 引擎的使用方法
1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...
随机推荐
-
Spring之初体验
Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...
-
ios基础篇（二十一）—— UIImagePickerController类
UIImagePickerController简述: UIImagePickerController 类是获取选择图片和视频的用户接口,我们可以用UIImagePickerController选择我们 ...
-
log4net 中错误 System.Web.HttpException (0x80004005): 文件不存在
用日志组件,Global 中配置的输出最后一个错误信息,总是出现下面的错误信息: 2014-04-01 14:35:41,757 级别:ERROR 信息:[Exception]:System.Web. ...
-
dede 数据库类使用列表
dedecms的数据库操作类,非常实用,在二次开发中尤其重要,这个数据库操作类说明算是奉献给大家的小礼物了. 引入common.inc.php文件 require_once (dirname(__FI ...
-
建造者模式（Builder）
建造者模式(Builder)将复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. 建造者模式通常包括下面几个角色: 1. builder:给出一个抽象接口,以规范产品对象的各个组成成分的 ...
-
【android】侧滑关闭activity
最近在使用IOS系统的时候,发现侧滑关闭很实用,因为单手就可以操作,不需要点击左上角的回退按钮.或者返回键了. 所以打算在android上实现这个技术. 需求: 1:IOS只能在屏幕边缘开始,往中间进 ...
-
ubuntu14.04安装eclipse
1.安装jdk7.x,参考上篇<Linux14.04安装JDK> 2下载eclipse.tar 3.sudo tar -zxvf eclipse-x-x-.tar.gz mv eclips ...
-
IE10与IMG图片PNG显示不了 WP中的WebBrowser中无法查看PNG格式的图片
在IE10下,IMG的图片不能是PNG格式的,PNG格式显示不了,JPG显示就可以
-
win10 uwp 应用转后台清理内存
我在写小说阅读器,把每个打开的文件的内容读到内存,因为小说都很小,所以放在内存不怕太大,但是我如果打开了一本小说,再打开一本,我不会把先打开的小说的内容清除掉,在内存.所以一旦我打开多小说的时候,内存 ...
-
使用tail命令实时查看日志文件
[Shell] 纯文本查看 复制代码 ? 1 tail -f /日志文件 好了.就这样用.简单吧 退出ctrl+C