jade(二)

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