让我们来聊聊 jade 模板引擎

最新推荐文章于 2024-08-29 09:46:00 发布

神圣光

最新推荐文章于 2024-08-29 09:46:00 发布

阅读量666

点赞数

分类专栏： NodeJS 文章标签：模板引擎 jade NodeJS 前端

本文链接：https://blog.csdn.net/weixin_41399785/article/details/79243384

版权

NodeJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jade 模板引擎

jade 是高性能的node JavaScript模板引擎，它主要针对node的服务端

它是侵入式的模板引擎，和普通的 HTML 和 CSS 是无法共存的，强依赖的模板引擎

既然学习了 node，那怎么可以不知道 jade 的用法呢？？

让我们来一起学习以下他的基本语法吧！！！

jade

安装：cnpm install jade

使用：引入 const jade = require('jade');

规则：根据缩进来规定层级，属性放在圆括号 ( ) 里面，并使用逗号分隔

jade 的语法规则

属性的写法：

link(src="a.js", rel="stylesheet")
// <script src="a.js" rel="stylesheet"></script>

内容的写法：(空一个空格)(注意：tab和空格不能同时使用，所以这行的引进用空格代替)
```
a(href="http://www.baidu.com") 官网
// <a href="http://www.baidu.com">官网</a>
```

style 属性的写法：

常规写法：

div(style="width:200px;height:100px;")
// <div style="width: 200px; height: 100px;">

JSON 形式写法：

span(style= {width: '200px', height: '100px'})
// <span style="width:200px;height:100px"></span>

class 属性的写法

常规写法：

div(class="aa bb cc")
// <div class="aa bb cc"></div>

Array 数组形式写法：

div(class=['aa', 'bb', 'cc'])
// <div class="aa bb cc"></div>

class 和 id 的简写

div.box  // <div class="box"></div>
div#div1  // <div id="div1"></div>

使用 &attributes 进行 JSON 形式的属性书写

div&attributes({title: 'aaa', id: 'div2'})
// <div title="aaa" id="div2"></div>

使用 '|' 进行内容的书写，表示 “原样输出”

body
|abc
|ddd

输出：

<body>
abc
ddd
</body>

或者如此输入：

script
    |window.onload=function () {
    |   var oBtn = document.getElementById('btn1');
    |};

结果为：

<script>
  window.onload=function () {
    var oBtn = document.getElementById('btn1');
  };
</script>

使用 '.' 来进行内容的书写，代表他的所有下级原样输出为内容

script.
    window.onload = function () {
        var oBtn = document.getElementById('btn1');
    };

结果为：

<script>
  window.onload = function () {
      var oBtn = document.getElementById('btn1');
  };
</script>

使用 include 引入内容，而且不增加 http 请求数

// 将 a.js 的内容进行引入
script
    include a.js

引入变量

div 我的名字：#{name}
// <div>我的名字：Han</div>
div #{a + b}
// <div>23</div> // 支持运算

当然前提是还要给这个变量赋值

// 给变量 name 赋值
var str = jade.renderFile('./views/4.jade', { pretty: true, name: 'Han', a: 11, b: 12 });

变量在 class 和 style 中的应用

var str = jade.renderFile('./4.jade', { pretty: true, json: { width: '100px', height: '100px', background: 'red' }, arr: ['aaa', 'bbb', 'ccc'] });

div(style=json)
div(class=arr, class="ddd")
// <div style="width:100px;height:100px;background:red"></div>
// <div class="aaa bbb ccc ddd"></div>

而且自己加上的 class 会自动添加进去，彼此不冲突

在 jade 文件中直接定义变量

- var num1 = 12;
- var num2 = 13;
div #{num1 + num2} 
// <div>25</div>

变量填充内容的简写形式

- var a = 11;
- var b = 22;
div #{a}
div #{b}
// 可以简写成
div=a
div=b
// 结果一样：<div>11</div> <div>22</div>

在 jade 中使用 for 循环建立多个标签

- var arr = ['aaa', 'bbb', 'ccc'];
- for (var i = 0; i < arr.length; i++)
div=arr[i]
// 输出为：<div>aaa</div> <div>bbb</div> <div>ccc</div>

在 jade 中注入标签，使用 !=

- var html = '<h3>标题</h3><p>内容</p>';
div!=html
// div><h2>标题</h2><p>内容</p></div>

在 jade 中使用 if 语句

- var number = 13;
- if (number%2 == 0)
div(style={background: 'red'}) 偶数
- else
div(style={background: 'green'}) 基数
// 最终输出为： <div style="background:green">基数</div>

在 jade 中使用 switch 语句

-var number2 = 1;
case number2
when 0
    div aaa
when 1
    div bbb
when 2
    div ccc
default
    div '都不是'
// 最终输出为： <div>bbb</div>

在 jade 中使用 while，前面不需要加上 -

- var a = 0;
while a < 3
if (a%2 == 0 && a != 0)
    div.last #{a++}
else
    div #{a++}

输出为：

<div></div>
<div></div>
<div class=last></div>

以上就是 jade 的基础语法了，本人学习的基础语法有源码的演示地址：https://github.com/ssgluffy/NodeJS-learning/tree/master/jade

里面还有更加详细的笔记，大家感兴趣的话可以去看看！！

神圣光

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录