模板引擎

最新推荐文章于 2024-07-15 23:03:53 发布

yutingbai

最新推荐文章于 2024-07-15 23:03:53 发布

阅读量123

点赞数

分类专栏： node.js 文章标签：模板引擎 nodejs

本文链接：https://blog.csdn.net/yutingbai/article/details/87905713

版权

node.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

模板引擎

作用：生成页面

jade - 破坏式，侵入式，强依赖·

const jade = require('jade');
var str = jade.render('html');
var str = jade.renderFile('文件路径',{pretty:true});
console.log(str);//

语法

根据缩进规定层级
属性放在括号里面，用逗号隔开

script(src='');
a(href='XXX') 链接

内容空个格

div aaa
      span bbb

style属性比较特殊，可以用json

    div(style="width:200px; height:200px; background:red;")
    div(style= {width: '200px', height: '200px', background: 'red'})

class属性比较特殊，可以用数组

div(class= ['aaa', 'left-warp', 'active'])

| ， .代表原样输出

body
    |abc
//<body>abc</body>

include 引入外部文件并原样输出

include a.js

用变量改变标签属性

const jade=require('jade');

console.log(jade.renderFile('./views/8.jade', {pretty: true,
  json: {width: '200px', height: '200px', background: 'red'},
  arr: ['aaa', 'left-wrap']     //class属性可以和数组里的自动合并
}));
//./views/8.jade
div(style=json);
div(class=arr class='active');

输出变量时# == =

    span #{a}
    span=a

'-'表示代码，不进行输出

  -var a=12;
    -var b=5;
    div 结果是：#{a+b}
    /*  <html>
        <head></head>
        <body>
            <div>结果是：17</div>
        </body>
        </html>*/

简写

div#id      //<div id='id'></div>
div.class   //<div class='class></div>
div&attributes({title:'aaa',id:'div1'})

for循环
非转义输出html标签(不用转义字符）

div!=content

if
switch case用法相同但变成case when

 -var a=1;
    case a
      when 0
        div aaa
      when 1
        div bbb
      when 2
        div ccc
      default
        |不靠谱

ejs - 温和式，非侵入式，弱依赖

const ejs=require('ejs');

ejs.renderFile('./views/1.ejs', {name: 'blue'}, function (err, data){
  if(err)
    console.log('编译失败');
  else
    console.log(data);
});

    我的名字叫：<%= name %>
//我的名字叫：blue

输出

<%= name %>
<%= json.arr[0].name %>
<%= 12+5 %>
<%= 'asdfasdf' %>

所有原生js有的都可以用
非转义输出html标签(不用转义字符）

<%
var str = "<div></div>"
%>
<%=str%> //&lt;div&gt;&lt;/div&gt;
<%-str%> //<div></div>

include

<% include ../a.txt %>

yutingbai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模板引擎

模板引擎作用：生成页面jade - 破坏式，侵入式，强依赖·const jade = require('jade');var str = jade.render('html');var str = jade.renderFile('文件路径',{pretty:true});console.log(str);//语法根据缩进规定层级属性放在括号里面，用逗号隔开script...
复制链接

扫一扫

专栏目录