基于模板引擎Jade的应用(详解)

作者:SingSingaSong 时间:2024-05-11 10:14:57 

有用的符号:

| 竖杠后的字符会被原样输出 · 点表示下一级的所有字符都会被原样输出,不再被识别。(就是|的升级版,实现批量) include 表示引用外部文件

短杠说明后面跟着的字符只是一段代码(与|的区别就是,|后面的内容会被显示,而短杠后面的内容直接不显示了!)

例子:

js:


const jade = require('jade');
console.log(jade.renderFile('./xxx.jade',{pretty:true,name:'singsingasong'}))

jade:

'|'的应用

基于模板引擎Jade的应用(详解)

'.'的应用

基于模板引擎Jade的应用(详解)

基于模板引擎Jade的应用(详解)

include的应用

基于模板引擎Jade的应用(详解)

调用变量做运算

基于模板引擎Jade的应用(详解)

div的class

基于模板引擎Jade的应用(详解)

'-' 的应用

基于模板引擎Jade的应用(详解)

变量的直接引用

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']
}));

运行结果:

基于模板引擎Jade的应用(详解)

'!' 的应用


html
head
body
div(class='1')!=content
div(class='2')

运行结果:

基于模板引擎Jade的应用(详解)

jade的if...else...


html
head
body
-var a=19;
if(a%2==0)
 div(style={background:'red'}) 偶数
else
 div(style={background:'green'}) 奇数

基于模板引擎Jade的应用(详解)

case语句


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

基于模板引擎Jade的应用(详解)

综合的来一个

小提示:之前的jade文件我们都没有写DOCTYPE,这里给它加上

基于模板引擎Jade的应用(详解)

这个执行结果的是:如果文件读写顺利就输出‘成功',如果出错,就返回‘错误'。

来源:http://www.cnblogs.com/n2meetu/archive/2017/12/12/8026932.html

标签:模板引擎,Jade
0
投稿

猜你喜欢

  • sqlserver中根据字符分割字符串的最好的写法分享

    2012-06-06 19:44:40
  • Oracle Instr函数实例讲解

    2024-01-14 18:05:32
  • 利用Pytorch实现简单的线性回归算法

    2022-09-08 00:00:09
  • 在Django model中设置多个字段联合唯一约束的实例

    2021-02-09 22:04:59
  • Windows下Python3.6安装第三方模块的方法

    2022-07-18 19:08:23
  • node.js入门教程迷你书、node.js入门web应用开发完全示例

    2024-05-03 15:57:38
  • Go1.18新特性对泛型支持详解

    2024-05-22 17:46:25
  • Python网络编程之ftplib模块

    2021-12-11 01:49:37
  • PyQt5 实现字体大小自适应分辨率的方法

    2022-08-25 03:07:44
  • vue实现nav导航栏的方法

    2024-05-09 15:18:22
  • 用户体验杂谈

    2011-10-21 21:09:08
  • Python列表常见操作详解(获取,增加,删除,修改,排序等)

    2021-02-04 10:10:19
  • C#操作mysql数据库的代码实例

    2024-01-22 10:20:54
  • 详解Python if-elif-else知识点

    2022-02-23 16:06:23
  • Python基础之画图神器matplotlib

    2022-03-03 23:34:02
  • golang API开发过程的中的自动重启方式(基于gin框架)

    2024-02-03 02:56:48
  • SQL数据库十四种案例介绍

    2024-01-14 14:50:42
  • Golang底层原理解析String使用实例

    2024-02-19 17:16:26
  • ASP 循环导入导出数据处理 不使用缓存

    2010-07-02 12:31:00
  • selenium.webdriver中add_argument方法常用参数表

    2023-12-05 13:39:38
  • asp之家 网络编程 m.aspxhome.com