前端学习——Pug模板
1.类名和ID名
a.button
a(class="button")
a#button
a(id = "button")
编译后：<a class="button"></a>
<a id="button"></a>
如果前面没指定标签名，则默认div
2.属性
用（）包裹，属性值之间用逗号隔开。可实现根据条件设置属性的语法形式
&atrributes() 更方便添加自定义属性
3.文本内容
a(href="google.com",title ="google") Hello World
多行文本：
p.
xxxxxxx
xxxxxx
xxx
或者
p
|xxxx <strong>hey</strong>
|xxxx
|xx
4.变量
-var htmlData ='<strong>srf</strong>
p#{htmlData} 或者 p=htmlData
p!=htmlData 或者 p!{htmlData}
5.注释
Jade支持两种注释：单行注释和多行注释。没中注释支持两种模式：输出源文件和不输出源文件
//单行输出
//-单行不输出
//
多行输出
//-
多行不输出
6. 代码嵌入
6.1 第一种方式 - ，特殊字符不会被转义
- for(var x=0;x<3;x++)
li <a></a>
编译后：
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
6.2 第二种方式：使用= 特殊字符会被转义
p
= 'This code is <escaped>!'
编译之后：<p>This code is <:escaped >:!</p>
6.3第三种方式：使用 ！=
p
!='This code is <escaped>!'
编译之后：<p>This code is<escaped>!</p>
7. 插值语法
预先指定一个位置，方便以后插入一个新值，简称插值。
转义字符串插值 #{} ：-var theGreat = "<span>escape!</span>";
p This will be safe: #{theGreat}
不转义字符串插值 !{}：-var theGreat = "<span>escape!</span>";
p This be safe: !{theGreat}
标签插值：p#[a(href ="jade-lang.com") Jade]
编译生成：
<p>This will be safe:<:span>:escape!<:/span>:</p>
<p>This will be safe: <span>escape!</span></p>
<p><a href="jade-lang.com">Jade</a></p>
7.条件语句 if……else…… /unless
case ……when……
Jade中没有类似与break语法，所有条件默认一种输出
8.遍历语句
使用each对数组和对象遍历
//遍历数组
ul
each val,index in ['zero','one','two']
li = index +':'+val
//遍历对象
ul
each val,index in{1: 'one',2:'two',3:'three'}
li = index +':' + val;
9. mixins 混合宏 ,具有复用、解耦、可读、可扩，可维护。创建混合宏实例时，需要使用+标识符
mixin list
ul
li foo
li bar
li baz
+list
+list
混合宏还可以用来传递参数
mixin pet(name)
li.pet = name
ul
+pet('cat')
+pet('dog')
+pet('pig')
还可以用...标识符表示不数量的参数。
需要替换混合宏的某个部分，那么就可以使用block标识符来占位
有关属性的混合宏：
mixin link(href, name)
a(href=href)&attributes(attributes)=name
+link('/foo','foo')(class = "btn")
编译后：<a href = "/foo" class = "btn">foo</a>
10.includes
实现高度复用的另一种方式就是将代码片段保存到不同文件中，然后再需要导入的地方导入。
11.extends
//- layout.jade
doctype html
html
head
block title
title Default title
body
block content
//- index.jade
extends ./layout.jade
block title
title Article Title
block content
h1 My Article
用append和prepend可以在之后和之前追加