第二章 Jade-文档声明和头尾标签

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>&lt;script&gt;alert(1)&lt;/script&gt;&lt;span&gt;大家好！&lt;/span&gt; </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>

效果图