模板引擎

1.模板引擎：模板引擎编译成html，静态js，css；

jade与pug同名

2.如何使用jade解析字符串：

1.》下载jade：cnpm install jade
2.》引入jade：const jade=require（‘jade’);
3.》用jade解析字符串：var str=jade.render('html');

3.如何使用jade解析文本：

1.》引入jade：const jade=require（‘jade’);
2.》用jade解析文本：var str=jade.renderFile('文件路径'，{pretty：true})；
实例：
jade.js

//使用jade解析字符串
const jade=require('jade');
var str=jade.render('html');
console.log(str);

jade2.js

//使用jade解析文本
const jade=require('jade');
var str=jade.renderFile('./content/1.jade',{pretty:true});
console.log(str);

1.jade(以jade结尾的为模板引擎，在jade里面用Tab键空格，以此来区分层级)

html
    heade
    body
        ul
            li
            li
            li
    

4.jade中的属性：

style属性在jade里面可用来解析对象；
class属性在jade里面可用来解析数组格式；
注：多个属性间用逗号隔开
注：在jade中通过缩进来区分层级结构
实例：
3.jade

html
    head
    body
        a(href='http://www.baidu.com')
        input(type='text',name='uname',value='用户名')

jade2.js

//使用jade解析文本
const jade=require('jade');
var str=jade.renderFile('./content/3.jade',{pretty:true});
console.log(str);

5.如何把jade语法写入html中：

引用fs模块
3.js

const jade=require('jade');
const fs=require('fs');
var str=jade.renderFile('./content/3.jade',{pretty:true});
fs.writeFile('b.html',str,function(err){
    if(err){
        console.log('失败')
    }else{
        console.log('成功')
    }
})

3.jade

html
    head
    body
        a(href='http://www.baidu.com')
        input(type='text',name='uname',value='用户名')
        div(style="width:1234px;height:50px;")
        div(style="{width:1234px;height:50px;}")
        p(class=rose nav banner)
        p(class=['rose','nav','banner'])

6.如何在jade语法中给元素添加内容：

实例：
4.jade

html
    head
    body
        a("http://www.baidu.com") 去百度
        div aaa
            span bbb
            h3 ccc

jade2.js

//使用jade解析文本
const jade=require('jade');
var str=jade.renderFile('./content/4.jade',{pretty:true});
console.log(str);

7.原样输出：
5.jade (script后加.) 内容前加|

html
    head
    body
        div
            |aaa
            |bbb
            |ccc
        script.
            var btn=document.getElementById('botton');
            var btn=document.getElementById('botton');
            var btn=document.getElementById('botton');
            var btn=document.getElementById('botton');
            var btn=document.getElementById('botton');

jade2.js

//使用jade解析文本
const jade=require('jade');
var str=jade.renderFile('./content/5.jade',{pretty:true});
console.log(str);

注意：在jade中：script里不允许强制换行

8.在jade中解析变量

2.js

const jade=require('jade');
var str=jade.renderFile('./content/2.jade',{pretty:true,uname:'jack'});
console.log(str);

2.jade

html
    body
    div
        |我的名字叫#{uname}

9.在jade中做运算

3.js

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

3.jade

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

10.在jade中解析style和class

4.js

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

4.jade

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

11.在jade中解析js
5.js

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

5.jade

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

12.在jade中如何循环
5.js

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

5.jade

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

13.在jade中如何解析标签

7.js

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

7.jade

html
    head
    body
        div!=contents

14.在jade里面做条件判断

8.js

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

8.jade

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