Express框架之Jade模板引擎使用
前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合express框架如何使用jade!
首先使用jade需要在node_moudles中安装jade
npm i jade --save在nodejs文件中使用jade无需像原生一样使用require("jade")引入,但需要一下设置
//引用jade
app.engine('jade', require('jade').__express);
app.set("view engine","jade");然后和使用ejs模板引擎差不多,进行呈递这个模板引擎文件
app.get("/",function(req,res){
res.render("haha",{
a:5,
jobs:["北京","上海","深圳","许昌","五道口职业技术学院","加利福尼亚州"]
});
})使用render先去呈递模板引擎,然后设置需要渲染的数据内容
基础语法:
接下来看一下jade文件基础语法
html(lang="en")
head
title jade模板引擎页面
body
h1 jade真强呀!渲染后效果其实就这个样子,没有标签,也没有闭合,类似于Python语法使用缩进
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>jade真强呀!</h1>
</body>
</html>变量渲染:
基础语法了解后我们看一下怎么去呈递一个变量
html(lang="en")
head
title jade模板引擎页面
body
h1 jade真强呀!
ul
li 哈哈哈
li 今天是 #{a} 月
li 这是一个li
li jade虽然不易懂,但是很强大;安排!
ul上面小例子看到呈递变量很简单 使用#{变量名称}
循环:
接下来我们看一下如何实现for循环
html(lang="en")
head
title jade模板引擎页面
body
h1 jade真强呀!
ul
li 哈哈哈
li 今天是 #{a} 月
li 这是一个li
li jade虽然不易懂,但是很强大;安排!
ul
each job in jobs
li= job这里的循环使用的是 each .... in.....
job指传递数组中的一个元素,而jobs是传递的整个数组,循环后job内弄填充每个li
当然这个jobs数组是在nodejs内,我们也可以将这个数组直接在jade文件中声明
-var jobs=["北京","上海","深圳","许昌","五道口职业技术学院","加利福尼亚州"];
each job in jobs
li= job这样就在jade渲染了数据 在声明变量时候使用前加-
对象转换:
我们接下来看一下对象类型转换
h1 张三个人信息
ul
each val,key ininfo
li #{key}:#{val}同样使用each ... in..进行渲染数据,当然也是可以加-在jade进行声明数据;
整个渲染出html效果如下
总之jade的效率还是很棒的;习惯之后会爱不释手
,今天这个jade的简单应用介绍到这里!有机会继续讨论(TuCao)这个jade!
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-7-8，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
