2-1初体验第一个jade文件的创建
//index.jade
doctype html
html
head
title hello jade
body
h1 hello jade
因为我们在第一章已经讲了全局安装jade了，所以我们就可以使用jade 命令了
jade index.jade
运行结果就会生成一个压缩代码后的index.html
如果我们不想生成的index.html文件进行压缩
那么我们可以执行:
jade -P index.jade
如果我们想实时看到我们的编译效果，那么我们应该如何操作呢？
jade -P -w index.jade
2-2 Jade-标签语法
在1-1中像：html、head、body、h1、strong、ul、li....等等都是Jade的标签。
这些标签不会像html标签成对出现 他是去掉左右箭头的单标签，标签空格后面接文本内容。
2-3 Jade-属性文本和值
如果是单标签文件，那么class id等等其他属性应该怎么写呢？
- class: div.title
//解析出来就是：
<div class="title"></div>
- id: div#title
//解析出来就是：
<div id="title"></div>
- 叠加写法:div#title.title
//解析出来就是：
<div id="title" class="title"></div>
- 括号添加属性就是：
div(id="title" class="title" style="color:#ccc" data-ui="hello")
//解析出来就是：
<div id="title" style="color:#ccc" data-ui="hello" class="title"></div>
效果图
2-4 Jade-混合的成段文本和标签
那么一个段落有多行文本我们又是如何来展示的呢？
//|+空格
p this is paragraph
| hello everyone
span 12122
b 大家好
//标签+.
p.
this is paragraph
hello everyone
span 12122
b 大家好
p
| this is paragraph
| hello everyone<span>12122</span>
b 大家好
效果
2-5 Jade-注释和条件注释
//h3 单行注释
//- h4 缓冲注释 不会解析到浏览器代码中
//-
p 多行注释
2-6 Jade-声明变量和数据传递
第一种页面上声明变量 传递数据
- var b = "hello"
p #{b} world
//解析后：
<p>hello world</p>
第二种编译过程中:
jade -P -w index.jade --obj '{"b":"hello1"}'
此时我们注释掉页面上的
// - var b = "hello"
//解析后：
<p>hello1 world</p>
第三种是引入外部的json文件来传递变量值
//a.json
{"b":"hello2"}
//运行
jade -P -w index.jade -O a.json
//解析后：
<p>hello2 world</p>
最后我们在说一点
除了可以定义变量的传递 我们还可以对变量进行一些js的操作比如，把字母转换为大写等等的操作：
- var b = "hello"
p #{b.toUpperCase()} world
//编译的结果
<p>HELLO world</p>
ps:这三种的优先级呢，内部变量声明，数据的传递优先级最高
2-7Jade-安全转义与非转义
- var a = "text"
- var htmlData = '<script>alert(1)</script><span>大家好！</span>'
p #{a}
//解析结果：
<p>text</p>
//就行了转义
p #{htmlData}
//解析结果：
<p><script>alert(1)</script><span>大家好！</span> </p>
//没有进行转义
p !{htmlData}
//解析结果：
<p><script>alert(1)</script><span>大家好！</span> </p>
//上面三种写法还可以通过=来写 （等价于=）
p=a
p=htmlData
p!=htmlData
//解析结果：同上面三种解析结果一样
//那如果我就想页面显示#{htmlData} 或者 #{a}
p \#{a}
p \!{htmlData}
//解析结果：
<p>#{a}</p>
<p>!{htmlData}</p>
//在我们给页面标签赋值的时候，有时候并没有这个变量，又不想页面解析成为undefined
input(value='#{c}')
input(value=c)
//解析结果：
<input value="undefined">
<input>
2-8 流程代码-for-each-while
h4 for
- var newObj = {course:'jade',leave:'high'}
- for (var k in newObj)
p= newObj[k]
h4 each
- each value,key in newObj
p #{key}:#{value}
each value,key in newObj
p #{key}:#{value}
h4 遍历数组
- var course = ['javascript','react','vue']
each item in course
p= item
h4 嵌套循环
- var sections = [{id:0,items:['a','b']},{id:1,items:['c','d']}]
dl
each section in sections
dt= section.id
each items in section.items
dd= items
h4 while
- var n = 0
ul
while n < 4
li= n++
效果
2-9 流程代码 if-else-unless-case
h4 if else
- var isTrue = true
- var lessons = ['jade','js']
if lessons
if lessons.length>2
p more than 2: #{lessons.join(',')}
else if lessons.length>1
p more than 1: #{lessons.join(',')}
else
p no1 lessons
else
p no2 lessons
unless !isTrue
p #{lessons.length}
h4 case
- var name = 'jade'
case name
when 'java'
when 'node'
p Hi node
when 'jade': p Hi jade
when 'express': p Hi express
default
p Hi #{name}
效果
2-10 神奇的mixins
doctype html
html
head
title hello jade
body
h3 mixin
mixin lesson
p hello mixin
+lesson
h3 mixin function(函数方法、入参)
mixin study(name,courses)
p #{name}
ul.course
each course in courses
li=course
+study('sunnyFan',['Javascript','React','Vue'])
h3 mixin object nesting(对象与嵌套)
mixin group(student)
+study(student.name,student.courses)
+group({name:'sunnyFan',courses:['Javascript','React','Vue']})
h3 mixin slogon
mixin team(slogon)
p #{slogon}
if block
block
else
p no team
+team('slogon')
p Good Job!
h3 mixin attr(传递属性)
mixin attr(name)
p(class!=attributes.class) #{name}
+attr('attr')(class='mgic')
mixin attrs(name)
p&attributes(attributes) #{name}
+attrs('attrs')(class='mginc2',id='mginc2')
h3 mixin 当我们要传递很多不确定的值时候
mixin mgic(name,...items)
ul(class='#{name}')
each item in items
li=item
+mgic('sunnyFan','18','man','..')
编译后的html:
<!DOCTYPE html>
<html>
<head>
<title>hello jade</title>
</head>
<body>
<h3>mixin</h3>
<p>hello mixin</p>
<h3>mixin function(函数方法、入参)</h3>
<p>sunnyFan</p>
<ul class="course">
<li>Javascript</li>
<li>React</li>
<li>Vue</li>
</ul>
<h3>mixin object nesting(对象与嵌套)</h3>
<p>sunnyFan</p>
<ul class="course">
<li>Javascript</li>
<li>React</li>
<li>Vue</li>
</ul>
<h3>mixin slogon</h3>
<p>slogon</p>
<p>Good Job!</p>
<h3>mixin attr(传递属性)</h3>
<p class="mgic">attr</p>
<p id="mginc2" class="mginc2">attrs</p>
<h3>mixin 当我们要传递很多不确定的值时候</h3>
<ul class="sunnyFan">
<li>18</li>
<li>man</li>
<li>..</li>
</ul>
</body>
</html>
效果图
