实时监控
jade -P -w .\test1.jade
sublime 分栏，可以看到实时修改情况
1. 元素写法
doctype html
<!--[if IE8]><html class='ie8'><![endif]-->
<!--[if IE9]><html class='ie9'><![endif]-->
<!--[if !IE]><!-->
html
<!--<![endif]-->
head
meta(http-equiv='Content-Type', content='text/html', charset='UTF-8')
title jade study
body
style.
body{color:#ff6600}
script.
var imoocCourse = 'jade'
h2 文档声明和头尾标签
h2 标签语法
section
div
ul
p
h2 元素属性
div#id.class1.class2 aa
a(href='http://imooc.com')
h2 注释
h3 单行注释
// h3.title(id='title')
h3 非缓存注释
//- #id.classname
h3 块注释
//-
p
a(href='http://imooc.com')
h3.title(id='title',class='title3') imooc
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
strong 11
| 2. bb
| 3. cc
| 4. dd
2. 传递参数
a. 页面直接定义
- var course = "jade";
b. 编译命令带参数
jade -P -w test2.jade --obj '{"course":"jade"}'
c. 编码带上参数 json 文件
jade -P -w .\test2.jade -O imooc.json
imooc.json
{
"course":"jade3"
}
参数使用
#{course}
#{course.toUpperCase()}
doctype html
html
head
meta(charset='utf-8')
title #{course.toUpperCase()} study
body
h2 转义、
- var data = 'text'
- var htmlData = '<script>alert(1)</script><span>script</span>'
p #{data}
p 安全转义 #{htmlData}
p 非转义 !{htmlData} p= data
p= htmlData
p!= htmlData
p \#{htmlData}
p \!{htmlData} input(value=newData)
input(value=data)
h2 声明变量和替换数据
3. 定义代码片段 及 遍历
doctype html
html
head
meta(charset='utf-8')
title 测试定义代码块
body
h2 流程
h3 for each 遍历对象
- var imooc = {course:'jade',level:'high'}
- for (var k in imooc)
p= imooc[k]
- 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
4. 利用 gulp 编译 jade
gulpfile.js 可以自动编译新增 jade 文件
var gulp = require('gulp'),
jade = require('gulp-jade');
gulp.task('jade', function() {
return gulp.src('**/*.jade')
.pipe(jade())
.pipe(gulp.dest('./'));
});
gulp.task('watch', function() {
gulp.watch('**/*.jade', ['jade']);
});
// gulp.task('watch', function() {
// gulp.watch('./**/*.jade', function(e) {
// var p = e.path.replace(__dirname, '')
// .replace(/\/[^\/]+?\.jade$/, '/');
// gulp.src(e.path)
// .pipe(jade())
// .pipe(gulp.dest('.' + p));
// });
// });
gulp.task('default', ['watch']);