模板引擎

模板引擎是用来渲染页面的。页面中一部分内容是根据程序生成的，会变化的。

主流的模板引擎有两种：

* jade

破坏式的、强依赖的
用了它就不能用html。

* ejs

非侵入式的、比较温和。
并不破坏原有的html 、 css(其实是往里面加入东西。)

jade

• 根据缩进，规定层级
• 属性放在（）里面，逗号分隔
• 内容空个格，直接往后堆（但是不能换行）

div xxx
    span xxx
      a(href="xxx") 链接

属性

<script src="a.js"></script> script(src="a.js")

内容

<a href="http://www.zhinengshe.com/">官网</a>
a(href="http://www.zhinengshe.com/") 官网

jade文件

html
    head
        style
        script(src=‘a.js‘)
        link(rel="stylesheet", href="",type="")
        script window.onload = function(){var oBtn=document.getElementById(‘div1‘);}; //大段的代码可以跟在后面，但是不能换行(会报错的！)
    body
        a(href="http://www/baidu.com/")百度
        a(href="http://www/qq.com/")腾讯
        div aaa 
            span bbb    // 可以嵌套子元素
        //- style 有两种写法：普通属性写法、json写法
        div(style="width:200px;height:200px;background:red;")       
        div(style= {width: ‘200px‘,height: ‘200px‘,background: ‘red‘})  

        div(title={width:‘200px‘, height:‘200px‘, background:‘red‘})  
        
        //- class 有两种写法：普通属性写法、arr 写法
        div(class="aaa lefr-wrap active")
        div(class=[‘aaa‘,‘left-wrap‘,‘active‘])
        div(title=[‘aaa‘,‘left-wrap‘,‘active‘])

        //- 简写
        div.22
        div#111

        //-属性的另外一个写法 
        div(title="111" id="001")
        div&attributes({title:‘aaa‘,})

TIPs:

style="width:200px;height:200px;background:red;"

1.普通属性写法

2.用json

class="aaa left-swrap active"

1.普通属性写法

2.用arr

js文件：

const jade=require(‘jade‘);

var str=jade.renderFile(‘你的jade文件路径‘, {pretty: true});

console.log(str);

jade.render(‘字符串‘);

jade.renderFile(‘模板文件名‘, 参数)