Experience first create a document in the early jade 2-1
//index.jade
doctype html
html
head
title hello jade
body
h1 hello jade
Because we have talked about in the first chapter of the global installed jade, jade so we can use the command
jade index.jade
The results will generate a run after the code compression index.html
index.html file if we do not want to generate the compressed
so we can perform:
jade -P index.jade
If we want to see in real time the effect of our compiler, then we should be how to operate it?
jade -P -w index.jade
2-2 Jade- tag syntax
Tags html, head, body, h1, strong, ul, li .... and so are Jade: like at 1-1.
These labels do not come in pairs like html tags to remove the left and right arrows he is single label, then the space behind the label text.
2-3 Jade- text and attribute values
If the label is a single file, then the class id and so on other properties should be how to write it?
- class: div.title
//解析出来就是：
<div class="title"></div>
- id: div#title
//解析出来就是：
<div id="title"></div>
- Superposition written: div # title.title
//解析出来就是：
<div id="title" class="title"></div>
- Attribute is added in parentheses:
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- mixed text and labels into segments
So a paragraph more than one line of text to show how we do?
//|+空格
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- comments and conditional comments
//h3 单行注释
//- h4 缓冲注释 不会解析到浏览器代码中
//-
p 多行注释
2-6 Jade- declare variables and data transfer
On the first page you declare a variable data transfer
- var b = "hello"
p #{b} world
//解析后：
<p>hello world</p>
The second compilation process:
jade -P -w index.jade --obj '{"b":"hello1"}'
此时我们注释掉页面上的
// - var b = "hello"
//解析后：
<p>hello1 world</p>
The third is the introduction of an external file to pass variable values json
//a.json
{"b":"hello2"}
//运行
jade -P -w index.jade -O a.json
//解析后：
<p>hello2 world</p>
Finally, we are saying that
in addition to pass-defined variables, we can also operate on a number of variables such as js, the letters are converted to uppercase and so on operations:
- var b = "hello"
p #{b.toUpperCase()} world
//编译的结果
<p>HELLO world</p>
ps: do these three priorities, internal variable declaration, pass data has the highest priority
2-7Jade- escaped and non-escaped Security
- 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>
Process 2-8 -for-each-while Code
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 code path 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 magic of 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','..')
Compiled 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>
