jade学习笔记

1、编译文件
        jade 文件名 -P -w
2、大段文本的写法:
        | 内容前加“|”  或者采用. 元素名.  内容    例:
                            
3、注释:
        单行注释  //    -->      <!-- 这里是注释-->
    jade注释   //-   仅在jade中注释,不会显示在html文件里
    块注释   //- 下面一行并缩进的代码 都会被解释成块注释     仅在jade中注释,html中不显示    例:
        
4、声明变量和替换数据
        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文件
5、安全转义与非安全转义:
        - 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'>
6、流程控制:
        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 
7、条件判断语句
    1. if...else...
        
    2. unless... 除非...
    3.case
8、代码重用:mixins
 
 
(未完待续……)
 
 
 
    
原文地址:https://www.cnblogs.com/newh5/p/4950135.html