nodeJs 模版引擎

nodeJs 模版引擎_第1张图片

先安装依赖

ejs与jade的区别

jade 侵入式      破坏原来的html

ejs   非侵入式    不破坏

----------------------------------------------------------------------------------------------------------------------------

jade的使用

1.根据缩进,规定层级 。 如图

nodeJs 模版引擎_第2张图片

2.属性放在()里面,逗号分隔

3.内容空个格,直接往后堆

------------------------------------------------------------

style的写法:1.普通属性写法。2.用json

nodeJs 模版引擎_第3张图片

class的写法:1.普通属性写法。2.用arr

nodeJs 模版引擎_第4张图片


如果要用json的写法 就要加上&attributes





jade.render('字符串');

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

nodeJs 模版引擎_第5张图片

其中pretty参数的作用为输出排版。 下图1为写了参数,图2为没有参数的结果

nodeJs 模版引擎_第6张图片


使用ejs 

nodeJs 模版引擎_第7张图片nodeJs 模版引擎_第8张图片

--------------------------------------------------------------------------------------------------------

nodeJs 模版引擎_第9张图片

前面带| 则表示 后面输出的为内容 不是标签

nodeJs 模版引擎_第10张图片

后面加.号也能达到同样的效果。点 表示它所有的下一级的内容都是原样输出。

nodeJs 模版引擎_第11张图片

include 可以引入文件。

-----------------------------------------------------------------

nodeJs 模版引擎_第12张图片nodeJs 模版引擎_第13张图片nodeJs 模版引擎_第14张图片

把变量name 引入进来。

nodeJs 模版引擎_第15张图片

class 和style 不用#号 可以直接接变量,   也可以2个class同时存在。

nodeJs 模版引擎_第16张图片

-意味着我是一段代码。

span #{a}    和 sapn = a   是一样的

nodeJs 模版引擎_第17张图片nodeJs 模版引擎_第18张图片

div!=content  非转义字符  就是不要content里的内容转译为字符串,而是转译为标签

nodeJs 模版引擎_第19张图片

例子

nodeJs 模版引擎_第20张图片

nodeJs 模版引擎_第21张图片

nodeJs 模版引擎_第22张图片

-------------------------------------------------------------------------------------------------------------------------

ejs的写法

nodeJs 模版引擎_第23张图片nodeJs 模版引擎_第24张图片

include 引用文件

nodeJs 模版引擎_第25张图片

你可能感兴趣的:(node)