jade学习笔记

安装jade

jade模板引擎

安装至全局 npm install jade -g
jade编译html

1
2
3
4
jade file //压缩编译 如jade index.jade
jade file -P //不压缩编译
jade file -w //对文件状态监控 一但文件变化则会实时编译、
jade file -w -P //两个指令 实时不压缩编译

jade中的元素标签

  • 无需成对出现
  • 无需使用尖括号
  • 子级对父级需要缩进
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    doctype
    html
    head
    meta(charset="utf-8")
    title soul 学习笔记
    body
    h1 hello soul jade
    section
    hr
    br
    p
    input

对应HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>soul 学习笔记</title>
</head>
<body>
<h1>hello soul jade</h1>
<section></section>
<hr><br>
<p></p>
<input>
</body>
</html>

jade元素属性与值

用过emmet肯定很快速入门如何写属性与值
下面用一段代码快速入门

1
2
3
4
5
6
7
h1.title =><h1 class="title">
h1#title.title.title2 => <h1 id="title" class=""title title2">
#id.classname => <div id="id" class="classname">
#id.title2(class="title3" data="testdate") => <div id="id" data="testdate" class="title2 title3">
a(href="http://baidu.com" title="baidu title" data-uid="1000") => <a href="http://baidu.com" title="baidu title" data-uid="1000">
input(name="course" type="text" value="hello jade") => <input name="course" type="text" value="hello jade">
input(name="box" type="checkbox" checked) => <input name="box" type="checkbox" checked>

jade混合成段文本和标签

jade有两种处理办法

第一种

在p后面加一个. 注意.是紧挨着p的 然后换行写所需要的文字和标签就okay了
这种方法标签不能用jade形式来书写了 只能用原生的尖括号形式 jade是支持原生尖括号形式
当然缩进也是要注意的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 p.
1.aaa
2.bbb
3.cccccc<a href="http://baidu.com">
4. ddddddd
5.<p>eeeeee</p>

HTML

<p>
1.aaa
2.bbb
3.cccccc<a href="http://baidu.com">
4. ddddddd
5.<p>eeeeee</p>

第二种

p后面不加. 换行缩进写所需要的文本 文本前面需要加上一个|符号
如果要书写标签 不需要加上|符号 但是得把文本当成一个节点来处理
也就是说 |1.aaa 是一个节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
        p
|1.aaa
a(href="http://baidu.com")
|2.bbb
p hello im P
|3.ccc
|4.ddd

HTML

<p>1.aaa<a href="http://baidu.com"></a>2.bbb
<p>hello im P</p>3.ccc
4.ddd
</p>

大家稍微测试下就弄懂了

jade的注释

jade单行注释

//- xxx 这种形式不会被编译到html
// xxx 会被编译至html以html注释的形式显示

1
2
3
4
5
6
    //这是注释 h1 23333
//- 这段完全不会输出到HTML

HTML

<!--这是注释 h1 23333-->

jade多行注释

注意缩进
//- 下面缩进的代码都是注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    //

是br
h1
p 注释

//-
p 这段注释
不会被
输出
至HTML

HTML

<!--

是br
h1
p 注释

-->

jade针对IE条件注释

这样就okay了~
具体点可以参考
jade官方文档

1
2
3
4
5
6
<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->

<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->

jade声明变量

#{name}用来解析jade定义的变量
用- var name 来定义jade变量

1
2
- var jade="study jade"
p #{jade} => <p>study jade

jade转义

例如下面一段代码
#号也可以替换为=号

1
2
3
4
5
6
7
h2 转义
- var date="2015年10月31日18:05:50"
- var htmlDate="<script>alert(2015)</script>"
p #{date}

p #{htmlDate}
p= date
p= htmlDate

jade会对字符串中的尖括号进行转义 转义后的HTML为

1
2
3
<h2>转义</h2>
<p>2015年10月31日18:05:50</p>
<p>&lt;script&gt;alert(2015)&lt;/script&gt;</p>

如果想输出!或者#只需要使用一下\转义如

1
2
3
4
5
p \!{date}

HTML

<p>!{date}</p>

页面不存在一个变量会输出undefined,
如果我们不想让jade编译后输出undefined,有这个变量就输出这个变量,无就为空
那么可以吧#{}去掉
如: input(value=date)

jade非转义

只需要把#换成!
也可以加!=

1
2
3
4
5
6
7
8
9
10
11
12
13
h2 非转义
- var date="2015年10月31日18:05:50"
- var htmlDate="<script>alert(2015)</script>"
p !{date}
p !{htmlDate}
p!= date
p!= htmlDate

HTML

<h2>非转义</h2>
<p>2015年10月31日18:05:50</p>
<p><script>alert(2015)</script></p>

jade流程-for-each-while

for

还是利用缩进控制
变量 soul对象

1
2
3
- var soul={name:"soul",level:"high"}
- for(var k in soul)
p= soul[k]

each

each 传递两个参数 第一个是返回的value 第二个是遍历的对象

1
2
- each value,key in soul
span #{key}:#{value}

嵌套循环

这里在遍历的时候加了一个三元判断
如果arr1.length大于10那么返回arr1 否则返回一个默认数组

1
2
3
4
5
- var arr1=[{id:1,items:["a","b"]},{id:2,items:["c","d"]},{id:3,items:["e","f"]}]
- each item in arr1.length>10?arr1:[{id:0,items:["defalut"]}]
dt=item.id
each data in item.items
dd=data

while循环

如果n<4则循环 n="">=4则跳出

1
2
3
4
- var n=0
ul
- while(n<4)
li=n++

jade if else case

if else

同样是缩进关系..应该挺好看懂的

1
2
3
4
5
6
7
8
9
10
11
- var ispeople=true
- var people=["girl","boy","???"]
if people
if people.length>2
p #{people.join(",") } do you know ??? sex
else if people.length>1
p #{people.join(",") }
else
p no people
else
p no people

case

1
2
3
4
5
6
7
8
9
10

- var name="jade"
case name
when "jave"
when "node"
p hi node!
when "jade" : p hi jade!
when "express" : p hi express!
default
p hi #{name}

mixin

可以看成JS中的函数
通过mixin name 声明
以及+name调用

普通调用

1
2
3
4
5
6
7
mixin lesson
p study jade
+lesson

HTML

<p>study jade</p>

传参调用

1
2
3
4
5
6
 mixin study(name,courses)
p #{name}
ul.courses
each course in courses
li= course
+study("soul",["jade","node"])

嵌套调用

1
2
3
4
5
6
7
8
9
10
11
12
13
 mixin group(student)
h4 #{student.name}
+study(student.name,student.courses)
+group({name:"soul",courses:["jade","node"]})

HTML

<h4>soul</h4>
<p>soul</p>
<ul class="courses">
<li>jade</li>
<li>node</li>
</ul>

传递调用时的代码块

我们在调用team的时候缩进了一下 写了个p good job!
这就是block 代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
mixin team(slogon)
h4 #{slogon}
if block
block
else
p no team
+team("slogon")
p good job!

HTML

<h4>slogon</h4>
<p>good job!</p>

获取传递的参数值

通过attributes.name来获取调用时候传递的属性值

1
2
3
mixin attr(name)
p(class!=attributes.class) #{name}
+attr("attr")(class="magic")

传递参数值不确定情况下

name是确定的,后面的参数都是不确定的 那么我们只需要加上 …items
传递的属性值都存储在items这个数组里
类似于 js中的arguments

1
2
3
4
5
mixin magic(name,...items)
ul(class="#{name}")
each item in items
li=item
+magic("magic","node","jade","js","html")

jade 模板的继承

block块

jade中是通过缩进来控制的block的
那么什么是block呢

1
2
block hello
p see u ag

这样就声明了一个block 并且命名为hello

block重用

会输出两段P标签 类似于函数

1
2
3
4
5
6
7
block hello
block hello

HTML

<p> see u ag </p>
<p> see u ag </p>

block继承

首先创建一个文件为 layout.jade

1
2
h1 这是layout.jade
block content

然后创建一个文件为 index.jade
最重要的是 extends layout.jade
继承 layout.jade

1
2
3
4
5
extends  layout.jade

block content
h1 我是content
p 继承layout

编译下index.jade 最终继承的HTML为

1
2
3
<h1> 这是layout.jade</h1>
<h1>我是content
<p>继承layout</p>

模板包含

通过 include语句来引入一个jade文件或者html静态文件
新建一个head.jade文件
然后新建一个body.jade文件
在head.jade文件中书写

1
2
3
head
meta(charset="utf-8")
title 学习笔记

在body文件中书写

1
2
3
4
include head.jade
h2 引入head的同时还可以追加内容
body
h1 body内容