Jade学习笔记

Jade 高亮显示:
https://packagecontrol.io/installation#st3
npm install -g jade 全局安装jade
Jade 模板引擎
Jade是express默认的模板引擎
将动静部分柔和的一种实现机制或者是技术
动态：纯数据 占位符
静态：模板
特点：
1，超强的可读性
2，灵活易用的缩进
3，块扩展
4，代码默认经过编码处理，以增强安全性
5，编译及运行时的上下文错误报告
6，命令行编译支持
7，html5模式
8，可选的内存缓存
9，联合动态的静态标记类
10，利用过滤器解析树的处理
通过命令行可以将jade按照到全局使用命令对jade文件进行编译。
jade -p:编译成可读html
jade -w:对文件编辑状态进行实时的监控
...
元素，标签
<h1 class="title"></h1> --> h1.title
<h1 id="title"></h1>-->h1#title
<h1 id="head" class="title"></h1>-->h1#head.title
div可以直接写:#id.classname----><div id="id" class="classname"></div>
h1.title(id="head",class="title3") what------><h1 id="head" class="title title3">what</h1>
a(href="www.baidu.com",title="jade study",data-uid="1000") link--->link
input(type="text",value="jade",name="class")----><input type="text" name="class" value="jade">
input(type="checkbox",value="jade",name="class",checked)----><input type="checkbox" name="class" value="jade" checked>
jade注释
单行注释 //
非缓冲注释（不被编译到） //-
块注释 //- 在块元素上注释

大段文本
p.
1.a
strong 2.b
3.c
引入脚本和样式:
style.
body{color:red}
script.
var i = "baidu"
jade 可以像js一样声明变量
-var i = "jade"
title #{i.toUpperCase()} study
demo.jade

demo.html