Open zhaoqize opened 6 years ago
现在 jade 改名成 pug 了
jade
pug
npm install jade
简单使用
p hello jade!
渲染后:
<p>hello jade!</p>
jade安装成功后,进入node命令使用。
jade.compile:编译字符窜
> var jade = require('jade') undefined > jade.compile('p hello jade!')() '<p>hello jade!</p>'
jade.compileFile:编译jade文件
> var jade = require('jade') undefined > jade.compileFile('hello.jade')() '<p>hello jade!</p>' >
jade.render:渲染html
> jade.render('p hello jade!') '<p>hello jade!</p>'
jade.renderFile:渲染jade文件
> jade.renderFile('hello.jade') '<p>hello jade!</p>' >
当jade全局安装后也可以直接使用jade命令。
jade filename
C:\Users\Administrator>jade hello.jade rendered hello.html C:\Users\Administrator>
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>
这样看起来顺眼多了。
jade -w filename 监控文件
执行:
C:\Users\Administrator>jade -w hello.jade watching hello.jade rendered hello.html
一旦我们修改jade文件,html文件会实时修改。此乃神技也,有点像supervisor。
选择器的使用
p.bt.cn#dn
编译后
<p id="dn" class="bt cn"></p>
如果省略标签元素,默认是div
.bt.cn#dn
<div id="dn" class="bt cn"></div>
一般属性
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>
带有杠的CSS属性写法
a(style={'z-index':'11000'})
使用 = 赋值会进行转义
=
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>
数据库中的字符串这样:萱公子&青橙
很明显被转义了。
显示到前端页面如果继续使用 #{} 这样的形式的话,输出的会是萱公子 & 青橙。肯定是不行的。
#{}
&
这时候,我们可以使用:!{} 这样的形式
!{}
单个变量
- 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>
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>
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]-->
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>
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>
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>
mixin templ_li(value) li #{value} ul +templ_li('香蕉') +templ_li('橘子')
<ul> <li>香蕉</li> <li>橘子</li> </ul>
这个特性让我们能自定义一些模板函数。特别是当我们的 html 结构有相似的时候。
html
其实跟less中的公共类,react中的公共函数也都是共通的。
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> } })
安装
基本使用
简单使用
渲染后:
jade安装成功后,进入node命令使用。
jade.compile:编译字符窜
jade.compileFile:编译jade文件
jade.render:渲染html
jade.renderFile:渲染jade文件
当jade全局安装后也可以直接使用jade命令。
jade filename
jade -P filename 使html文件变得可读
修改hello.jade文件为:
运行:
jade.html文件变成这样:
这样的可读性太差了,不过没事我们有P(pretty)参数
运行:
hello.html文件变成这样:
这样看起来顺眼多了。
jade -w filename 监控文件
执行:
一旦我们修改jade文件,html文件会实时修改。此乃神技也,有点像supervisor。
常规用法
选择器的使用
编译后
如果省略标签元素,默认是div
编译后
属性的使用
一般属性
编译后
多个属性如果写一行觉得拥挤的话,可以分开写
style属性
编译后:
带有杠的CSS属性写法
字符转义
使用
=
赋值会进行转义编译后:
使用
!=
不会转义编译后:
数据库中的字符串这样:萱公子&青橙
很明显被转义了。
显示到前端页面如果继续使用
#{}
这样的形式的话,输出的会是萱公子&
青橙。肯定是不行的。这时候,我们可以使用:
!{}
这样的形式变量的使用
单个变量
编译后:
对象
编译后:
字符串拼接
编译后:
流程控制语句
Case
编译后:
For
编译后:
If...else
编译后:
注释
html可见注释
编译后:
html不可见注释
编译后:
多行注释(注意缩进)
编译后:
条件注释
编译后:
include
编译后:(一定要有这两个文件,不然jade会报错)
extends与block
layout.jade
business.jade
编译后:
busuness.html
jade中写行内js或css
编译后:
强大的Mixins
编译后:
这个特性让我们能自定义一些模板函数。特别是当我们的
html
结构有相似的时候。其实跟
less
中的公共类,react
中的公共函数也都是共通的。less中:
使用
react中:
使用