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
(未完待续……)