jade学习笔记
我的博客
简介
什么是jade?
jade是一款源于Node.js的HTML模板引擎。
模板引擎
依赖于JavaScript实现jade到HTML的转换
供Node使用
安装和编译
# 安装npm install -g jade# 编译jade demo.jade# 编译后将在同级目录下生成demo.html工具
jade官网
在线html转jade
空格和缩进的问题可能导致编译失败，建议选择合适的编辑器，比如：WebStrom。
语法
doctype
doctype html编译后：
注意： !!! 这种简写方式已经废除。
可选值还有：
xml
transitional
strict
frameset
1.1
basic
mobile
基本结构
//jadedoctype htmlhtml head meta(charset='utf-8') title JadeNotes body h1 Hello Jade!编译后：
JadeNotes # Hello Jade!注释
//这行注释将被编译//- 这行注释不会被编译// 多行注释 多行注释 多行注释编译后：
文本
p Hello Jade!编译后：
Hello Jade!选择器
//类选择器p.red-txt//ID选择器p# blue-txt//一个ID多个Classp# yellow-text.high-txt.demo-txt编译后：
属性
input(type='text', placeholder='Input your Phone')编译后：
嵌套
ul# demo-ul li.demo-li Hello li.demo-li World编译后：
Hello World变量
- var welcome = 'Hello World'p 'Xiguaaxigua, # {welcome}'编译后：
'Xiguaaxigua, Hello World'标签中有大段的块内容
script. console.log('Hello'); console.log('World');//或者script. | console.log('Hello'); | console.log('World');编译后：
console.log('Hello');console.log('World');console.log('Hello')console.log('World')转义
- var welcome = 'Hello Wrold'p welcomep= welcomep!= welcome编译后：
welcomeHello WroldHello Wrold= 会转义内容，不想被转义可以加 != 。
循环
使用each循环：
- var arr = ['A', 'B', 'C', 'D', 'E']ul each a in arr li= a- var obj = {'name': '老王', 'age': '33', 'money'}table each value, key in obj tr td # {key} td # {value}编译后：
1. A 1. B 1. C 1. D 1. E name 老王 age 33 money 1000case
case 和JavaScript里的 switch 作用一样。
- var money = 1000case money when 10000 h1 土豪 when 1000 h1 地主 when 100 h1 平民 when 1 h1 穷逼编译后：
# 地主或者：
- var money = 10000000case money when 10000: h1 土豪 when 1000: h1 地主 when 100: h1 平民 when 1: h1 穷逼 default: h1 你有多少钱？编译后：
# 你有多少钱？过滤器
支持markdown。必须是安装了 markdown-js 或者 node-discount 。
# 安装markdown-jsnpm install -g markdown-js# 或者安装node-discountnpm install -g node-discount例如：
:markdown ### Hello Markdown!编译后：
### Hello Markdown!mixin
无参数的mixin：
mixin welcome ul li 为系统而生，为框架而死，为debug奋斗一辈子 li 吃符号的亏，上大小写的当，最后死在需求上！ li Hello World!+welcome()编译后：
1. 为系统而生，为框架而死，为debug奋斗一辈子 1. 吃符号的亏，上大小写的当，最后死在需求上！ 1. Hello World!有参数的mixin：
mixin welcome(param) ul li 为系统而生，为框架而死，为debug奋斗一辈子 li 吃符号的亏，上大小写的当，最后死在需求上！ li Hello # {param}!+welcome('Mixin')编译后：
1. 为系统而生，为框架而死，为debug奋斗一辈子 1. 吃符号的亏，上大小写的当，最后死在需求上！ 1. Hello Mixin!mixin中文支持block：
mixin welcome(param) ul if block block else li Nothing! li Hello Wrold!+welcome() li 为系统而生，为框架而死，为debug奋斗一辈子 li 吃符号的亏，上大小写的当，最后死在需求上！编译后：
1. Hello Wrold! 1. 为系统而生，为框架而死，为debug奋斗一辈子 1. 吃符号的亏，上大小写的当，最后死在需求上！mixin支持attributes
mixin link(href, name) a(class != attributes.class, title != attributes.title, href=href)= name+link('https://segmentfault.com/a/xiguaaxigua.cn', 'xiguaaxigua')(class='main-link', title='Hello Xigua！')编译后：
xiguaaxigua包含
有点类似freemaker，通过include来载入一些jade模板。
End
推荐文章：
W3CPlus-jade学习
Jade——源于Node.js的HTML模板引擎
Jade Syntax Documentation
10个最好的 JavaScript 模板引擎
关键字：jade, hello, 编译, welcome
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！