Jade模板引擎让你飞
大前端 2016-11-13
一.安装
npm install jade
二.基本使用
1.简单使用
p hello jade!
渲染后:
<p>hello jade!</p>
jade安装成功后,进入node命令使用。
2.jade.compile:编译字符窜
> var jade = require('jade')
undefined
> jade.compile('p hello jade!')()
'<p>hello jade!</p>' 3.jade.compileFile:编译jade文件
> var jade = require('jade')
undefined
> jade.compileFile('hello.jade')()
'<p>hello jade!</p>'
> 4.jade.render:渲染html
> jade.render('p hello jade!')
'<p>hello jade!</p>' 5.jade.renderFile:渲染jade文件
> jade.renderFile('hello.jade')
'<p>hello jade!</p>'
> 当jade全局安装后也可以直接使用jade命令。
6.jade filename
C:\Users\Administrator>jade hello.jade rendered hello.html C:\Users\Administrator>
7.jade -P filename 使html文件变得可读
修改hello.jade文件为:
doctype html
html
head
title hello jade!
body
p hello jade 运行:
jade hello.jade
jade.html文件变成这样:
<!DOCTYPE html><html><head><title>hello jade!</title></head><body><p>hello jade</p></body></html>
这样的可读性太差了，不过没事我们有P(pretty)参数
运行:
jade -P hello.jade
hello.html文件变成这样:
<!DOCTYPE html>
<html>
<head>
<title>hello jade!</title>
</head>
<body>
<p>hello jade</p>
</body>
</html> 这样看起来顺眼多了。
8.jade -w filename 监控文件
执行：
C:\Users\Administrator>jade -w hello.jade watching hello.jade rendered hello.html
一旦我们修改jade文件，html文件会实时修改。此乃神技也，有点像supervisor。
三.常规用法
1.选择器的使用
p.bt.cn#dn
编译后
<p id="dn" class="bt cn"></p>
2.如果省略标签元素，默认是div
.bt.cn#dn
编译后
<div id="dn" class="bt cn"></div>
3.属性的使用
一般属性
div(color='red',font-size='1.5rem')
编译后
<div color="red" font-size="1.5rem"></div>
多个属性如果写一行觉得拥挤的话，可以分开写
div(color='red'
font-size='1.5rem') style属性
a(style={color:'red'}) 编译后:
<a style="color:red;"></a>
4.字符转义
使用=赋值会进行转义
div(href="https://www.baidu.com/s?wd=jade&ws=jades")
编译后:
<div href="https://www.baidu.com/s?wd=jade&ws=jades"></div>
& 发生了转义 &
使用!=不会转义
div(href!="https://www.baidu.com/s?wd=jade&ws=jades")
编译后:
<div href="https://www.baidu.com/s?wd=jade&ws=jades"></div>
5.变量的使用
单个变量
- var code = 1;
p.bt #{code} 编译后：
<p class="bt">1</p>
对象
- var code = {z:1,q:2};
p.bt #{code.q} 编译后:
<p class="bt">2 </p>
字符串拼接
- var code = {z:1,q:2};
p(class='bt'+code.z) #{code.q} 编译后:
<p class="bt1">2</p>
6.流程控制语句
Case
- var i=0;
case i
when 0
div 变量为#{i}
when 1
div 变量为1
default
div 没有匹配项 编译后:
<div>变量为0</div>
For
- for(var i=0;i<2;i++)
div #{i} //注意缩进 编译后:
<div>0</div> <div>1</div>
If...else
- var ifv = true;
if(ifv)
div 为真
else
div 为假 编译后：
<div>为真</div>
7.注释
html可见注释
//html可见注释 div.bt
编译后:
<!--html可见注释--> <div class="bt"></div>
html不可见注释
//-html不可见注释 div.bt
编译后：
<div class="bt"></div>
多行注释(注意缩进)
// div.bt
编译后：
<!--div.bt-->
条件注释
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 8]><!--> <html lang="en"> <!--<![endif]-->
编译后：
<html lang="en" class="ie8"> <![endif]--> <!--[if IE 8]><!--> <html lang="en"> <!--<![endif]-->
8.include
doctype html
html
head
style
include style.css
body
script
include script.js 编译后:（一定要有这两个文件，不然jade会报错）
<!DOCTYPE html>
<html>
<head>
<style>p{
color:red;
}
</style>
</head>
<body>
<script>console.log(1)</script>
</body>
</html> 9.extends与block
layout.jade
doctype html
html
head
title hello jade!
body block content
block foot business.jade
extends ./layout.jade
block content
h1 content主体部分
block foot
h1 foot脚注部分 编译后：
busuness.html
<!DOCTYPE html>
<html>
<head>
<title>hello jade!</title>
</head>
<body>
<h1>content主体部分</h1>
<h1>foot脚注部分</h1>
</body>
</html> 10.jade中写行内js或css
doctype html
html
head
style.
p{color:red}
body
script.
console.log(OK) 编译后:
<!DOCTYPE html>
<html>
<head>
<style>p{
color:red;
}
</style>
</head>
<body>
<script>console.log(OK)</script>
</body>
</html> 11.强大的Mixins
mixin templ_li(value)
li #{value}
ul
+templ_li('香蕉')
+templ_li('橘子') 编译后:
<ul> <li>香蕉</li> <li>橘子</li> </ul>
这个特性让我们能自定义一些模板函数。特别是当我们的html结构有相似的时候。
其实跟less中的公共类，react中的公共函数也都是共通的。
less中：
.temp_color(@color:red){
color:@color;
}
//使用
p{
.temp_color(blank);
} react中:
var temp_prop = {
getDefaultProps:function(){
return {name:'共有属性'};
}
}
//使用
var ComponentDib = React.createClass({
mixins:p[temp_prop ],
render:function(){
return <h1>{this.props.name}</h1>
}
}) 
相关推荐
kbkiss 0喜欢 / 0评论 2019-06-28
89961330 0喜欢 / 0评论 2019-06-27
Macuroon 0喜欢 / 0评论 2015-10-09
我有一只小松鼠 0喜欢 / 0评论 2019-06-27
84324798 0喜欢 / 0评论 2014-09-12
realitycss 0喜欢 / 0评论 2019-06-26
gezilan 0喜欢 / 0评论 2019-06-21
fnaticTYZ 0喜欢 / 0评论 2012-12-27
80781792 0喜欢 / 0评论 2014-07-05
SYYling 0喜欢 / 0评论 2018-01-22
JohnnyPig 0喜欢 / 0评论 2018-02-23
89921334 0喜欢 / 0评论 2015-03-02
sureballse 0喜欢 / 0评论 2019-05-05
前端学习笔记 0喜欢 / 0评论 2015-12-10
爱好HtmlCssJs 0喜欢 / 0评论 2018-05-11
wufan0 0喜欢 / 0评论 2018-05-11
html的书写 0喜欢 / 0评论 2017-09-18
aaronicson 0喜欢 / 0评论 2017-09-17
OccamsRazor 0喜欢 / 0评论 2017-12-12
软件设计 0喜欢 / 0评论 2017-07-23