- 编译
-
jade index.jade,得到压缩后的代码（也就是没有空格） -
jade -P index.jade,得到格式化的代码，缩进都正常 -
jade -P -w index.jade,对jade文件实时编译，就不用改一次然后命令行敲一次了，直接自动编译
-
- 一个最简单的jade
doctype html
html
meta(charset="utf-8")
head
title meng
body
h1 jade
- 标签语法
- class
h1.classname - id
h1#idname - class + id
div.classname#idname可以连着写,顺序无所谓 -
div,很特殊如果直接写#id,前面不写div标签名，自动生成一个id=id的div - 属性写法
a(class='title',href='http://imooc.com'),类和id也可以这样写在括号里面，注意逗号分隔。 - 大段纯文本
p. ＃这个点必须紧紧跟着p，表示下面的是一个 wenben weben wenben p ＃这叫管道文本 |weneb |wene- 带标签的大段文本
p. wenbwne <strong>wenwbe</strong> ＃直接写标签名 或者 p | dss strong asdf ＃竖线的话元素不用写尖括号 | dsdfsf - class
- 注释
- 单行注释，直接在前面加
// - 非缓冲注释，完全不会被编译到html代码中
//- - 块注释，也是
//-或者//
- 单行注释，直接在前面加
- 写样式
style.
body{color:red}
- 写js代码
script.
var i = 0
或者
－ var i = 'hello'
－ for (var k in value)等等
- 声明变量和替换
- 第一种方式（写在页面里）
－ var course = 'jade' ＃把变量声明在页面里
＃这样course就可以在整个文档中被访问了
＃使用的时候#{course}就代表jade这个字符串了
＃并且可以用js方法，#{course.toUpperCase()}，将字符串变成大写
- 第二种方式（写在命令行）
＃命令行里面也可以传一个变量
jade index.jade -P -w --obj'{"course":"jade"}' ＃注意语法
当前文档里声明的变量优先级比命令行传的变量高
- 第三种方式（写在json文件里)(命令行升级版)
json文件,index.json
{
"course":"jade"
}
命令行
jade index.jade -P -w -O index.json
- 插入一个值（转义）
＃什么时候会转义，比如说要写一个script标签放在一个变量里
－ var htmlData = '<script>alert(1)</script>'这样尖括号就会被转义成<
- 非转义
p !{htmlData} p后面必须有空格这样尖括号还是尖括号，并且等同于p!= htmlData p后面紧跟，不能有空格 - 安全转义
p #{htmlData}常规引入变量，尖括号会被转义,并且等同于p= htmlData - tip 如果要输出！和＃，就得转义
\! \# - 存在一种特殊情况，当值不存在或者未定义的时候，那么就不用写#{}
input(value=newData),这样newData不论有没有值，都可以，没有值就相当于没有，不会显示undefined
- 代码嵌入总结
-
-,eg- for (var x=0;x<3 x ++) -
=,
p = 'This is <p>' ＃特殊字符会被转义，也就是尖括号-
!=,特殊字符不会被转义
-
- 流程代码
-
for each遍历
－ var course = {course:"jade",level:"high"} － for (var k in course) p= course[k] ＃这样就被直接执行了-
each遍历，数组，对象都可以
each value in arr p= value- 选择
case
case friends when 0 when 1 default p balalala-
while循环
while n < 4 li= n++- 选择
if ...else if ... else
还有－ var user = { description: 'foo bar baz' } － var authorised = false ＃user if user.description h2 Description p.description= user.description else if authorised h2 Description p.description. User has no description, why not add one... else h1 Description p.description User has no descriptionunless语句,不符合才执行－var con = flas unless con p Hello,world＃结果会生成p标签 -
-
mixins，需要用+标识符使用
mixin list
ul
li foo
li bar
li baz
+list
+list
带参数的混合宏
mixin pet(name)
li.pet= name
ul
+pet('cat')
+pet('dog')
...表示不定数量的参数
mixin list(id,...items)
ul(id=id)
each item in items
li= item
+list('mylist',1,2,3,4)
-
includes，实现高度复用，将代码片段保存在不同的文件中，需要哪个，导入哪个
＃在需要的地方写includes
html
./includes/head.jade
-
extends,实现继承，继承与复用的区别在于继承可以修改代码，而复用是原原本本的代码- 使用
block标识符，设置一个可修改代码片段，紧跟block后面的是该代码片段的名字
block codename title Default title - 使用
-
Mixins,制造可重复使用的代码段- 没有变量的mixins
//语法 mixin list ul li foo li bar li baz //使用 +list 即可- 传入变量的mixins
mixin pet(name) li.pet = name //使用 ul +pet('cat')- 更复杂的mixins
mixin article(title) .article .article-wrapper h1 = title if block blcok //存放可变的代码块 else p no content //使用 +article("hello") 或者 +article("hello block") p this is my block- mixins传入的变量也可以用“rest arguments”语法
mixin list(id,...items) ul(id=id) each item in items li= item //使用 +list('my-list',1,2,3,4)
- 坑坑坑！
- 用webstorm有时正常有时报错空格和tab不能混合用，解决办法：webstorm->preference->code style->jade->Tabs and Indents->勾选use tab charactor就行了！
网友评论