模板引擎jade（pug）

一.定义：编译成HTML，对于静态，js，css都可以
二.下载:

cnpm install jade

三.作用解析字符串，解析文件

如何在jade中解析变量

// jade  pug
// cnpm install jade 
//1.解析字符串
// 2.解析文件
const jade=require('jade');
// var str=jade.render('html');
var str=jade.renderFile('./view/1.jade',{pretty:true});
console.log(str);

html
    head
    body
        div
            a(href='http://www.baidu.com') 百度
            input(type='text',name='uname',value='用户名')
            div(style="width:100px;height:100px")
            div(style={width:'100px',height:'100px'})
            div(class='box left active')
            div(class=['box','left','active']) aaa
                span bbb
            div
                |aaaa
        script
            include 1.js

在jade中做运算

html
    head
    body
        div a+b=#{a+b}
        div #{a}
        div #{b}
        h1=a
        h1=b

const jade=require('jade');
var str=jade.renderFile('./view/3.jade',{pretty:true,a:3,b:5});
console.log(str);

jade解析style class

html
    head
    body
        div(style=json)
        p(class=arr)

const jade=require('jade');
var str=jade.renderFile('./view/4.jade',{pretty:true,
json:{width:'200px',height:'200px',background:'red'},
arr:['box','left','active']});
console.log(str);

在jade中解析js

html
    head
    body
        -var a=3;
        -var b=5;
        div a+b=#{a+b}                  

const jade=require('jade');
var str=jade.renderFile('./view/5.jade',{pretty:true});
console.log(str);

在jade中如何循环

html
    head
    body
        -for(var i=0;i<arr.length;i++)
            div=arr[i]  

const jade=require('jade');
var str=jade.renderFile('./view/6.jade',{pretty:true,arr:['aaa','bbb','ccc']});
console.log(str);

在Jade中解析标签

html
    head
    body
        div!=content

const jade=require('jade');
var str=jade.renderFile('./view/7.jade',{pretty:true,content:"<h1>dfglkfdkbl;gfblgf;lbhgf;lhbk</h1>"});
console.log(str);

在jade中做条件判断

html
    head
    body
        -var a=19;
        -if(a%2==0)
            div 偶数
        -else
            div 奇数

const jade=require('jade');
var str=jade.renderFile('./view/8.jade',{pretty:true});
console.log(str);

//  + - * / %(膜)：两个数相除的余数   5%2=1 10%2=0 19%2=1 作用：判断奇偶性