模板引擎Jade详解
有用的符号:
| 竖杠后的字符会被原样输出
· 点表示下一级的所有字符都会被原样输出,不再被识别。(就是|的升级版,实现批量)
include 表示引用外部文件
- 短杠说明后面跟着的字符只是一段代码(与|的区别就是,|后面的内容会被显示,而短杠后面的内容直接不显示了!)
例子:
js:
const jade = require('jade');
console.log(jade.renderFile('./xxx.jade',{pretty:true,name:'singsingasong'}))
jade:
'|'的应用
'.'的应用
include的应用
调用变量做运算
div的class
'-' 的应用
变量的直接引用
span#{a}
和span=a
效果是一样的。
jade中的for循环
jade:
-for(var i=0;i<arr.length;i++)
div=arr[i]
js文件:
console.log(jade.renderFile('./views/11.jade',{pretty:true,name:'singsingasong',
arr:['aaa','bbb','ccc','ddd']
}));
运行结果:
'!' 的应用
html
head
body
div(class='1')!=content
div(class='2')
运行结果:
jade的if...else...
html
head
body
-var a=19;
if(a%2==0)
div(style={background:'red'}) 偶数
else
div(style={background:'green'}) 奇数
case语句
html
head
body
-var a=1;
case a
when 0
div aaa
when 1
div bbb
when 2
div ccc
default
|不靠谱
综合的来一个
小提示:之前的jade文件我们都没有写DOCTYPE,这里给它加上
这个执行结果的是:如果文件读写顺利就输出‘成功’,如果出错,就返回‘错误’。
模板引擎Jade详解的更多相关文章
- Jade模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- flask中jinjia2模板引擎使用详解1
在之前的文章中我们介绍过flask调用jinja2模板的基本使用,这次我们来说一下jinjia2模板的使用 Jinja2 在其是一个 Python 2.4 库之前,被设计 为是灵活.快速和安全的. 模 ...
- flask中jinjia2模板引擎使用详解5
接上文 宏 可以理解为函数,即把一些常用的模板片段做好封装,以便于重用,减少工作量和维护难度. 宏的定义很简单: {%macro xxx()%} ##这里写内容 {%endmacro%} 下面引用 ...
- 模板引擎ejs详解
singsingasong.js: const ejs=require('ejs'); ejs.renderFile('./views/singsingasong.ejs', {'name':'sin ...
- maven pom文件简单模板和配置详解
https://blog.csdn.net/earbao/article/details/49924943 maven pom文件简单模板和配置详解
- VC 与Matlab混合编程之引擎操作详解
Visual C++ 是当前主流的应用程序开发环境之一,开发环境强大,开发的程序执行速度快.但在科学计算方面函数库显得不够丰富.读取.显示数据图形不方便. Matlab 是一款将数值分析.矩阵计算.信 ...
- tp6源码解析-第二天,ThinkPHP6编译模板流程详解,ThinkPHP6模板源码详解
TP6源码解析,ThinkPHP6模板编译流程详解 前言:刚开始写博客.如果觉得本篇文章对您有所帮助.点个赞再走也不迟 模板编译流程,大概是: 先获取到View类实例(依赖注入也好,通过助手函数也好) ...
- vue-cli生成的模板各个文件详解(转)
vue-cli脚手架中webpack配置基础文件详解 一.前言 原文:https://segmentfault.com/a/1190000014804826 vue-cli是构建vue单页应用的脚手架 ...
- js 模板引擎 jade使用语法
Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持. 功能 · 客户端支持 · 超强的可读性 · 灵活易用的缩进 · 块扩展 ...
随机推荐
- 解析Visual C# 7.2中的private protected访问修饰符
去年12月份,随着Visual Studio 2017 Update 15.5的发布,Visual C#迎来了它的最新版本:7.2. 在这个版本中,有个让人难以理解的新特性,就是private pro ...
- 【Unity与23种设计模式】装饰模式(Decorator)
GoF中定义: "动态地附加额外的责任给一个对象.装饰模式提供了一个灵活的选择,让子类可以用来扩展功能." 装饰模式一般用来增加新功能 它可以避免更改已经实现的程序代码 从而增加系 ...
- JDBC控制事务
概念 事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit).事务通常由高级数据库操纵语言或编程语言(如SQL,C++或Java)书写的用户程序的执行所引起,并 ...
- c++ dynamic_cast 和 static_cast 的区别
今天在看王道宝典的时候看到dynamic_cast ,一直都没用过,也不了解,今天来总结一下. dynamic_cast 和 static_cast 都可以用来强制转换指针类型,但不同的是dynami ...
- anaconda下安装新包一直报错(‘parse() got an unexpected keyword argument 'transport_encoding'’)
pip没有更新 解决方案:在prompt上输入 " conda install pip "
- Redis单例、主从模式、sentinel以及集群的配置方式及优缺点对比
https://my.oschina.net/zhangxufeng/blog/905611
- MySQL详解--锁,事务
http://www.cnblogs.com/jukan/p/5670950.html http://blog.csdn.net/xifeijian/article/details/20313977 ...
- 【Linux】 用户管理
Linux用户管理 ■ 查看用户整体情况 cat /etc/passwd可以查看用户的一些基本信息.用finger <user>似乎更加方便 查看某一个特定的用户的话就可以 grep &l ...
- linux --> 动态库和静态库
库的分类 根据链接时期的不同,库分为静态库和动态库之分. 静态库:在链接阶段被链接的,生成的可执行文件就不受库的影响了,即使库被删除了,程序依然可以成功运行. 动态库:在程序执行的时候被链接的,即使程 ...
- 设计模式 --> (8)组合模式
组合模式 组合模式,是为了解决整体和部分的一致对待的问题而产生的,要求这个整体与部分有一致的操作或行为.部分和整体都继承与一个公共的抽象类,这样,外部使用它们时是一致的,不用管是整体还是部分,使用一个 ...