node: jade 也叫 pug
jade 中不允许强制换行
先下载 jade
cnpm install jade
一: 如何使用 jade 解析字符串
- const jade =require('jade');
- var str=jade.render('html');// 渲染字符串
- console.log(str);
解析字符串
二: 如何使用 jade 解析文本
- const jade=require('jade');
- var str=jade.renderFile('./jade/text.jade',{
- pretty:true
- });//pretty: 按照所写格式输出. renderFile 用来渲染文本
- console.log(str);
.jade 格式用 TAB 表示层级关系, 如图所示:
./jade/text.jade
解析文本
三, jade 属性
- const jade=require('jade');
- var str=jade.renderFile('./jade/shuxing.jade',{
- pretty:true
- });//pretty: 按照所写格式输出
- console.log(str);
多个属性用逗号隔开
- HTML
- head
- body
- a(href='http://www.baidu.com')
- input(type='button',name='uname',value='名字')
jade 属性
jade 中的 style 与 CSS
- HTML
- head
- body
- div(style='width:100px,height:100px;background:red')
- div(style={width:'100px',height:'100px',background:'red'})
- p(class='left right box')
- p(class=['left','right','box'])
Image 5.PNG
四, 把 jade 模板引入到 HTML 中
- const jade=require('jade');
- const fs=require('fs');
- var str=jade.renderFile('./jade/style-class.jade',{pretty:true});
- fs.writeFile('a.html',str,function(err){
- if(err){
- colsole.log('失败');
- }else{
- console.log('成功');
- }
- })
此时文件夹中会多出一个 a.HTML 文件
cmd+r
2.HTML 中代码显示
五, 如何在 jade 中给元素添加内容
内容前用空格隔开
- HTML
- head
- body
- div asdf
- p ghjk
- a(href='http://www.baidu.com') asdfasdfasdf
给元素添加内容
六, 原样输出 HTML
个别用竖杠 | 隔开, 多个用点. 隔开
引入外部 JS 文件用 include
- HTML
- head
- body
- div
- |asdf
- |ghjkl
- script.
- var but=document.getElementById('button');
- var on=document.getElementById('input');
- div
a script 中引入外部文件用 include
- script
- include 2.JS
Image 12.PNG
今天就先总结到这里, 下章咱们接着说 jade 中的东西
来源: http://www.jianshu.com/p/2e69f2d67520