Pug原本是jade

以下是简单的学习

//兼容IE的情况下的写法

pug命令 -P 将pug文件转为排版过的html文件 -w 监控pug文件的变化 -O 引入json文件
title #{course}等同于title= course效果是进行传值，可以直接在pug文件里初始化course。也可以新建一个json文件，运行命令pug -P -w -O pug.json来将json文件里的数据传递进来

head
    Meta(charset="utf-8")
    title #{course.toUpperCase()} study
body
    style.
        body {
            color: #ff6600
        }
    script.
        let imoocCourse = "pug"

同等级的标签元素要有同样的缩进
下一级别的标签元素要再缩进

h2 标签语法
    section
        div
            ul
            p

元素的属性的写法
以下两种写法的效果是一样的，div可以省略

    h3 元素属性
    #id1.class1(class="class2")
    div#id1.class1.class2
        a(href="http://imooc.com",target="_blank") link
    h3 元素的值，文本
    p
        a(href="http://imooc.com",title="imooc jade study",data-uid="1000") link
        input(name="course",type="text",value="jade")
        input(name="type",type="checkBox",checked)

两种写法都是可以的

    h3 混排的大段文本
    p.
        | 1. aa
        | 2. bb
        
        | 3. cc
        | 4. dd
    p
        | 1. aa
        strong 11
        | 2. bb
        | 3. cc
        span 12
        | 4. dd

简单的注释

    h2 注释
    h3 单行注释
    // h3.title(id="title",class="title3") imooc
    h3 非缓冲注释
    //- #id.classname
    h3 块注释
    //-
        p
            a(href="http://imooc.com",data-uid="1000") link

转义

   h2 转义
    - var data = "text"
    - var htmlData = 'script'
    p #{data} //①text
    p #{htmlData} //②script
    p !{htmlData} //③alert出1，显示span里面的文本内容
p= data //①
p= htmlData //②
p!= htmlData //③
p \#{htmlData} //#{htmlData}
p \!{htmlData} //#htmlData
input(value="#{newdata}") 
//input(value=newdata)</code></pre>
程序控制
    h2 流程控制
    h3 for
    - var imooc = {course: "pug001",level: "high"}
    - for(var k in imooc)
        p= imooc[k]
h3 each

each value,key in imooc

p #{key}: #{value}
h3 遍历数组    
- var courses = ['node','jade','express']
each item in courses
    p= item

h3 嵌套循环
- var sections = [{id: 1,items: ['a','b']},{id: 2,items: ['c','d']}]
dl
    each section in sections    
        dt= section.id
        each item in section.items
            dd= item</code></pre>
mixin写法
mixin 定义一个名字
执行这个名字对应的内容
可以复用一个mixin，将复用的mixin全部执行一遍
    h2 mixin
    mixin lesson
        p imooc pug study
    +lesson
mixin study(name,courses)
    p #{name}
    ul.courses
        each course in courses
            li= course
+study('tom',['jade','node'])

mixin group(student)
    h4 #{student.name}
    +study(student.name,student.courses)
+group({name:'tom',courses: ['jade','node']})    

mixin team(s<a href="/tag/logo/" target="_blank" class="keywords">logo</a>n)
    h4 #{s<a href="/tag/logo/" target="_blank" class="keywords">logo</a>n}
    if block
        block
    else 
        p no team
+team('s<a href="/tag/logo/" target="_blank" class="keywords">logo</a>m')
    p Good job!

mixin attr(name)
    p(class!=attributes.class) #{name}
+attr('attr')(class='magic')

mixin attrs(name)
    p&amp;attributes(attributes) #{name}
+attrs('attrs')(class='magic2',id='attrid')

mixin magic(name,...items)
    ul(class= name)
        each item in items
            li= item
+magic('magic','node','..')</code></pre>
Syntax-docs/">参考
未完待续。。