jade中原样输出
1前面加“|”
html
head
body
div
|jdsgjfdg
|gnkjfdsg
script
var btn=docunment.getElementById('btn');
var btn=docunment.getElementById('btn');
var btn=docunment.getElementById('btn');
不加点2.jade.png
不加点cmd.png
2后面加“.(点)”
html
head
body
div
|jdsgjfdg
|gnkjfdsg
script.
var btn=docunment.getElementById('btn');
var btn=docunment.getElementById('btn');
var btn=docunment.getElementById('btn');
加点2.jade.png
3引入include x.js
jade
html
head
body
div
|fndj
|vnfdjkln
script
include a.js
a.js
document.getElementById('.vjf')=function(){
alert(111);
};
在html中显示
用fs模块写文件完成
cmd成功文件夹中就会有a.html
//引入jade
const jade=require('jade');
//fs
const fs=require('fs');
// var str=jade.render('html');解析字符串
var str=jade.renderFile('./view/2.jade',{pretty:true});
fs.writeFile('a.html',str,function(err){
if(err){
console.log('失败');
}else{
console.log('成功');
}
})
QQ拼音截图未命名.png
jade输出名字
#{}
day08 3.js
const jade=require('jade');
// var str=jade.render('html');解析字符串
var str=jade.renderFile('./view/3.jade',{pretty:true,uname:'jack'});
console.log(str);
day08 3.jade
html
head
body
div 我的名字叫#{uname}
QQ拼音截图未命名.png
jade运算
day08 4.js
const jade=require('jade');
// var str=jade.render('html');解析字符串
var str=jade.renderFile('./view/4.jade',{pretty:true,a:5,b:3});
console.log(str);
day08 4.jade
html
head
body
div 3+5=#{a+b}
QQ拼音截图未命名.png
day08 5.js
属性
const jade=require('jade');
var str=jade.renderFile('./view/5.jade',{pretty:true,
json:{width:'100px',height:'100px'},
arr:['left','box']
})
console.log(str);
day08 5.jade
html
head
body
div(style=json)
div(class=arr)
5.jade.png
如何在jade中执行js
前面加‘-‘’在html中显示
day08 6.js
const jade=require('jade');
var str=jade.renderFile('./view/5.jade',{pretty:true});
console.log(str);
day08 6.jade
html
head
body
-var a=5
-var b=3
div #{a+b}
6.jade.png
day08 6.js
const jade=require('jade');
var str=jade.renderFile('./view/6.jade',{pretty:true,a:5,b:3});
console.log(str);
day08 6.jade
html
head
body
div #{a+b}
span #{a}
span #{b}
p=5
p=3
6.jade.png
在jade中如何循环数组
day08 7.js
const jade=require('jade');
var str=jade.renderFile('./view/7.jade',{pretty:true,arr:['aaa','bbb']});
console.log(str);
day08 7.jade
html
head
body
-for(i=0;i<arr.length;i++)
div=arr[i]
7.jade.png
解析h1标签内容用‘！=’
day08 8.js
const jade=require('jade');
var str=jade.renderFile('./view/8.jade',{pretty:true,content:'<h1>fhoiuaffghjyr</h1>'});
console.log(str);
day08 8.jade
html
head
body
p!=content
8.jade.png
判断奇数或偶数
day08 9.js
const jade=require('jade');
// var str=jade.render('html');解析字符串
var str=jade.renderFile('./view/3.jade',{pretty:true'});
console.log(str);
day08 9.jade
html
head
body
-var a=19;
-if(a%2==0)
div 偶数
-else
div 奇数
9.jade.png
