jade 模板引擎在node express 开发中有较多的使用,首先我们看一个简单的使用jade 生成的html 页面的标签代码:

  1. doctype html
  2. html(lang="en")
  3. head
  4. title= pageTitle
  5. script(type='text/javascript').
  6. if (foo) {
  7. bar(1 + 5)
  8. }
  9. body
  10. h1 Jade - node template engine
  11. #container.col
  12. if youAreUsingJade
  13. p You are amazing
  14. else
  15. p Get on it!
  16. p.
  17. Jade is a terse and simple
  18. templating language with a
  19. strong focus on performance
  20. and powerful features.

相应生成的html 代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Jade</title>
  5. <script type="text/javascript">
  6. if (foo) {
  7. bar(1 + 5)
  8. }
  9. </script>
  10. </head>
  11. <body>
  12. <h1>Jade - node template engine</h1>
  13. <div id="container" class="col">
  14. <p>You are amazing</p>
  15. <p>Jade is a terse and simple
  16. templating language with a
  17. strong focus on performance
  18. and powerful features.</p>
  19. </div>
  20. </body>
  21. </html>

我们可以看到使用jade 模板可以简化我们的代码.

模板引擎之jade 学习的更多相关文章

  1. 学习篇:NodeJS中的模板引擎:jade

    NodeJS 模板引擎作用:生成页面 在node常用的模板引擎一般是 1.jade --破坏式的.侵入式.强依赖(对原有的html体系不友好,走自己的一套体系)2.ejs --温和的.非侵入式的.弱依 ...

  2. pug模板引擎(原jade)

    前面的话 为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示 在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致 ...

  3. [js高手之路]Node.js模板引擎教程-jade速学与实战1

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  4. [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  5. [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义

    一.转义与非转义 jade模板文件代码: doctype html html head meta(charset='utf-8') title jade学习-by ghostwu body h3 转义 ...

  6. 模板引擎之-jade

    ##### 首先我们安装jade模板引擎并编译`npm install jade --global`在项目文件夹下创建一个`index.jade`文件,并且写入```doctypehtml head ...

  7. [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用

    一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...

  8. Java模板引擎之Freemarker 学习笔记 一

    什么是Freemarker Freemarker是模板引擎,不是Web框架,只是视图层的组件,官网是 https://freemarker.apache.org/ Freemarker原理 数据模型+ ...

  9. 模板引擎ejs入门学习

    1:利用 NPM 安装 EJS 很简单 npm install ejs 2:安装完成肯定就是使用了 var template = ejs.compile(str, options); template ...

随机推荐

  1. Android之SwipeRefreshLayout下拉刷新组件

    SwipeRefreshLayout概述 SwipeRefrshLayout是Google官方更新的一个Widget,可以实现下拉刷新的效果.该控件集成自ViewGroup在support-v4兼容包 ...

  2. Zookeeper架构、ZAB协议、选举

    转载:深入浅出Zookeeper(一) Zookeeper架构及FastLeaderElection机制  (nice) ZooKeeper学习第六期---ZooKeeper机制架构 一.Zookee ...

  3. 管道的创建与读写pipe

    1.管道的创建 #include <unistd.h> int pipe(int pipefd[2]); linux下创建管道可以通过函数pipe来完成.该函数如果调用成功,数组中将包含两 ...

  4. Word发布到cnblogs文章

        1◆ 打开word 2◆ 注册用户   3◆ 操作 success

  5. 从用户输入url到页面最后呈现 发生了些什么?

    一.浏览器获取资源的过程: 1.输入url 2.浏览器解析url,获得主机名 3.将主机名转换成服务器ip地址(查找本地DNS缓存列表,如果没有则向默认的DNS服务器发送查询请求) 4.浏览器建立一条 ...

  6. Kafka生产者APi

    kafka客户端发布record(消息)到kafka集群. 新的生产者是线程安全的,在线程之间共享单个生产者实例,通常单例比多个实例要快. 一个简单的例子,使用producer发送一个有序的key/v ...

  7. (C/C++学习笔记) 九. 变量的存储类型

    九. 变量的存储类型 ● 变量的存储类型(见附页) ● 注释 ①对于自动变量,它属于动态存储方式. 但是也可以用static定义它为静态自动变量,或称静态局部变量,从而成为静态存储方式.由此看来,一个 ...

  8. 【Java集合的详细研究8】List,Set,Map用法以及区别

    Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素.一些Collection允许相同的元素而另一些不行.一些能排序而另一些不行.Java ...

  9. 关于LUN和卷的思考

    LUN:logical unit number 是指硬件层分出的逻辑盘,OS仍然把这些逻辑盘看成是物理盘. 例如将一个1PB磁盘柜划分为100个相同大小的lun,那么每个lun的大小就是10TB,lu ...

  10. JSP--TOMCAT-MYSQL web页面添加

    addStudent.jsp如下<%@ page language="java" import="java.util.*" pageEncoding=&q ...