Jade模板引擎学习(一)安装及基本语法
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(用于指定需要被渲染的视图(必选),本地变量(可选) ...
随机推荐
- hadoop问题集(1)
参考: http://dataunion.org/22887.html 1.mapreduce_shuffle does not exist 执行任何时报错: Container launch ...
- 最全NB-IoT/eMTC物联网解决方案名录汇总
NB-IoT/eMTC等蜂窝物联网技术的成熟和商用,占据低功耗广域网络(LPWAN)的主流地位,推动全球物联网新一轮发展热潮,越来越多的行业开始采用物联网方案来解决解决实际问题.实现落地应用,越来越多 ...
- RabbitMQ基本模式
最近用到了一些RabbitMQ的东西,看了官方的Get Started,以此为模板总结一下. (1)生产者(发送方)发送消息到ExChange(含参:routingkey),ExChange通过bin ...
- ZooKeeper server &&client
写了一个关于zookeepeer应用的简单demo 服务端定时的向zookeeper集群注册,客户端监听zookeeper服务节点变化,一旦变化,立刻响应,更新服务端列表 服务端代码: #includ ...
- LintCode-371.用递归打印数字
用递归打印数字 用递归的方法找到从1到最大的N位整数. 注意事项 用下面这种方式去递归其实很容易: recursion(i) { if i > largest number: return re ...
- iOS开发NS_ENUM和NS_OPTIONS区别
OC里枚举的两种类型.NS_ENUM和NS_OPTIONS本质上是一样的都是枚举. typedef NS_ENUM(NSInteger, UIViewAnimationTransition) { UI ...
- C# .net 调用QQ邮箱
public static void QQfs() { try { MailMessage mm = new MailMessage(); MailAddress Fromma = new MailA ...
- Scrum 冲刺博客,项目总结
1.各个成员在 Alpha 阶段认领的任务 数据库环境的搭建,连接数据库:张陈东芳 数据库语句sql语句:张陈东芳 商品实体类的实现:吴敏烽 获取所有商品信息的实现:吴敏烽 根据商品编号获得商品资料: ...
- spring ioc经典总结
component-scan标签默认情况下自动扫描指定路径下的包(含所有子包),将带有 @Component @Repository @Service @Controller标签的类自动注册到spri ...
- Jenkins系列-Jenkins升级、迁移和备份
升级Jenkins Jenkins的开发迭代非常快,每周发布一个开发版本,长期支持版每半年更新一次(ps:大版本更新).如此频繁的更新,怎么升级呢? war:下载新版的war文件,替换旧版本war文件 ...