jade学习

新项目接触了.jade模板，乍看有点懵，所以记录一下学习过程！

1. 环境安装

cnpm install -g jade

2.变量使用

- var course = "balabala"

转义变量字符:
p #{sourse}
p= datahtml

不转义变量字符:
p !{datahtml}
p!= datahtml

使用变量带方法
div #{sourse.toUpperCase()}

3.mixin的使用

doctype html
html
    meta(charset="utf-8")
    head
        title jade
    body
        //一、mixin 定义模块结构
        //  1.定义模块
        //- *不带参数
        mixin lesson
            p jade mixins
        //- *带参数
        mixin study(name,courses)
            p #{name} study
            ul.courses
                each course incourses
                    li= course
        //- *嵌套定义
        mixin group(student)
            h4= student.name
            +study(student.name,student.courses)
        //  2.mixin的调用
        //      *不带参数调用
        +lesson
        //      *带参数调用
        +study("David",["jade",nodejs])
        //      *嵌套的调用
        +group({name: "David",courses: ["jade","js"]})
        //  3.特性一（属性传递）
        //- 代码块(block为关键字：调用后面是否有代码块)
        mixin team(slogon)
            h4= slogon
            if block
                block
            else
                p no block
        +team("slogon")
            p have team
        //      *传递属性一 (attributes接收属性列表)
        mixin attr(name)
            p(class=attributes.class) #{name}
        +attr("attr")(title="title",class="class")
        //      *传递属性二 (会遍历属性列表并列出来)
        mixin attrs(name)
            p&attributes(attributes)
        +attrs("David")(class="class",id="id",title="title")
        //  4.特性二 （多参数传递）
        mixin magic(name,...items)
            ul(class="#{name}")
                each item in items
                    li= item
        +magic("David","jade","node","...")

4.继承与包含

//- index继承layout文件，相当于引入了layout文件 
extends layout

包含：

doctype html 
html 
head 
    //*使用包含，将head.jade文件包含进来(html) 
    include head 
    //*style.jade包含进来(css) 
    include style 
    style. 
        div{color: red;} 
body 
//*引入原生的html 
    include div.html 
        p laall

head.jade

meta(charset="urf-8")
title jade

style.jade

style. 
    p{ color: #07f; }

div.html

<p>aaqaaa</p>

5.filters过滤器的使用

6.数据引入

- var FilterList = require('./filterData');