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(用于指定需要被渲染的视图(必选),本地变量(可选) ...
随机推荐
- 贵州省未来二十年的投资机会的探讨1>
贵州的股市 1.000540.SZ 中天金融 2.000589.SZ 黔轮胎A 3.000733.SZ 振华科技 4.000851.SZ 高鸿股份 5.000920.SZ 南方汇通 6.002025. ...
- 从oracle导入hive
sqoop import --connect jdbc:oracle:thin:@10.39.1.43:1521/rcrm --username bi_query --password ####### ...
- ViewPager的简单使用说明
前提:工程中使用ViewPager,需要导入google提供的jar包(android-support-v4.jar). 要学习ViewPager的使用,建议直接看官方文档 Creating Swip ...
- c语言乐曲演奏——《千本樱》
这个程序着实花费了我好长的时间,我本身对音乐一窍不通,先是跟着girl friend学习了简谱,根据c调44拍的<千本樱>写下了下面的程序. #include<stdio.h> ...
- 软件工程 part4 评价3作品
作品1 抢答器 地址: https://modao.cc/app/ylGTXobcMU7ePNi6tY53gG4iraLl0md评价: 挺好玩,但是字体大小是个缺陷,简单大方. 作品2:连连看 软件工 ...
- c# 有无符号值进一步了解
1.编写过程中用到了short类型(有符号型,值范围含负值).两个正数之和得负. 改为int或unsigned short 均可. 2.注意,short型(-32768,32767)举例:做自加运算, ...
- Ubuntu录制gif动态图
大神写博客的时候通常一个Demo会附带一个动态图展示效果.在windows和mac上应该很容易找到录制工具,下面记录一下我在ubuntu下录制gif的过程. 下载byzanz录制工具 在ubuntu软 ...
- c语言作业1
- maven仓库中添加自定义的包jar包
mvn install:install-file -DgroupId=impl -DartifactId=center -Dversion=1.0 -Dpackaging=jar -Dfile=D:\ ...
- 微信抢红包软件-android
微信红包不错的分析: 附带源码 并包含了源码 参考: Android中微信抢红包助手的实现 (1) https://www.jianshu.com/p/19ddd41aa349 (2) http:// ...