模板引擎jade与ejs语法

最新推荐文章于 2021-09-10 19:50:45 发布

BeMount

最新推荐文章于 2021-09-10 19:50:45 发布

阅读量510

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40867255/article/details/90550701

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

首先环境需要准备命令如下npm i jade ,npm i ejs,npm i fs
jade的语法相对于ejs更有侵入性，破坏性这里写一个简单的列子来比较分析

html 
  head
  body
   div(class=['active','wrapper'])  hello this is jade

经过编译后是

<html>
 <head></head>
 <body>
   <div class="active wrapper">hello this is jade</div>
 </body>
</html>

这里使用的语法是属性可以写在（）里面，包裹的值空一格就可以书写了

ejs书写格式:

 <html>
 <head></head>
 <body>
   <div class="active wrapper">hello this is jade</div>
 </body>
 </html>

大家可以看到ejs没有啥改变。。

jade中属性中特殊的部分一个是style它可以直接使json数据格式，还有一个是class它可以直接使用数组格式，但也可以使用普通的格式，如果想要都是json数据格式，可以用以下格式引用div&attributes({bacgroundColor:'red'})；
ejs和jade在语法格式另一个不同在于

html
    head
    body
        div(class=['active','wrapper'],style={height:'100px'}) #{name}
        div&attributes({
            backgroundColor:'red'
        })
        -for(let i=0;i<arry.length;i++)
           div=arry[i]

  <html>
  <head></head>
  <body>
    <div class="active wrapper">hello this is jade</div>
    <%for(let i=0;i<3;i++)%{>
    <%include a.txt%>
    <%}%>
  </body>