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