jade學習筆記

一、編譯文件

        jade 文件名 -P -w

二、大段文本的寫法：

        ｜ 內容前加「｜」  或者採用. 元素名.  內容    例：

                             

三、註釋：

        單行註釋  //     -->      <!-- 這裏是註釋-->

    jade註釋   //-   僅在jade中註釋，不會顯示在html文件裏

    塊註釋   //- 下面一行並縮進的代碼 都會被解釋成塊註釋     僅在jade中註釋，html中不顯示    例：

        

四、聲明變量和替換數據

        1.直接在jade文件中聲明數據：

                -var course="jade";

                title #{ course.toUpperCase() };

        2.命令行的形式傳入數據：jade index.jade -P -w   --obj '{ "course":"jade" }'

        3.經過json文件傳入數據：jade index.jade -P -w -O data.json                //將數據寫入json文件

五、安全轉義與非安全轉義：

        - var htmlData='<script>alert(1)</script>';

        #{ htmlData }   -->  將html標籤及<等符號都轉義成安全的字符串；              簡寫：p=htmlData 

        ！{ htmlData }   -->  不轉義數據中的字符串                                            簡寫：p!=htmlData ;

    特殊狀況：輸出#{   

        p \!{ htmlData }            -->            <p>!{ htmlData }</p>

        

        input( value = newData )    若是newData不存在，則會輸出<input>

        input( value='#{newData}')  若是 ewData不存在，則會輸出<input value=' undefined'>

六、流程控制：

        jade支持原生js代碼

    1.for

        -var data = { course:jade, level:high}

        -for( var k in data )

            p= data[k]

    2.each 

         -var data = { course:jade, level:high}

        -each value key in data

            p #{key}:#{value}

    3.數組遍歷：

        var course=[node,jade,sass]

        each item in course 

            p = item ;

        嵌套示例：

        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 

七、條件判斷語句

    1. if...else...

        

    2. unless... 除非...

    3.case

八、代碼重用：mixins

 

 

（未完待續……）