Jade模板引擎学习(一)安装及基本语法
Jade是一款高性能简洁易懂的模板引擎,Jade是Html的Javascript实现,在服务端(NodeJS)及客户端均有支持。
一、功能
客户端支持 超强的可读性 灵活易用的缩进 块扩展 代码默认经过编码处理以增强安全性 编译及运行时的上下文错误报告 命令行编译支持 HTML5模式
可选的内存缓存 联合动态和静态标记类 利用过滤器解析树的处理 支持 Express 利用each透明的循环objects,arrays甚至不可枚举对象 块注释 不需要标记前缀
AST过滤器 过滤器 ...
二、jade安装
- npm install jade -g
- jade -h
三、jade工具
四、jade语法
4.1 标签
以p标签为例
- p
会转换为:
- <p></p>
jade能自动识别自闭和标签:
- input
会转换为:
- <input/>
4.2 文本
4.2.1标签中添加文本
- p 欢迎加入wandoujia-fe
会转换为:
- <p>欢迎加入wandoujia-fe</p>
4.2.2 标签中嵌套标签
直接跟写html一样就行
- p Welcome to wandoujia fe, we want <b>you</b>
会转换为:
- <p>Welcome to wandoujia fe, we want <b>you</b></p>
4.2.3 标签中有大段的块内容
- 方式一:在标签后面添加 "
."
比如一段js代码,注意是script后面有一个"."
- script.
- console.log('Welcome to join wandoujia-fe')
- console.log('We want you')
- 方式二:每段前面添加"
|"
- script
- | console.log('Welcome to join wandoujia-fe')
- | console.log('We want you')
转换结果:
- <script>
- console.log('Welcome to join wandoujia-fe')
- console.log('We want you')
- </script>
4.3 属性
以 ()
来分割属性
- a(rel="nofollow", href="http://www.wandoujia.com/join#getJobInfo=1") 招聘
会转换为:
- <a rel="nofollow" href="http://www.wandoujia.com/join#getJobInfo=1">招聘</a>
4.4 注释
4.4.1 单行注释
- // changed by yc-team
会转换为:
<!-- changed by yc-team -->
4.4.2 多行注释
- body
- //
- p 测试代码by yaochun
会转换为:
- <body>
- <!--p 测试代码by yaochun
- -->
- </body>
4.4.3 不输出的注释
在单行注释上加一个短横线 -
- //- 这段注释不会输出
- p 文本测试by yaochun
会转换为:
- <p>文本测试by yaochun</p>
注意: 很多文档里面提到的条件注释已经不再支持
4.5 doctype
添加一个doctype只需要doctype,然后再跟一个可选的值,默认是html
- doctype html
会转换为:
- <!DOCTYPE html>
注意:!!!
这种简写的方式已经被抛弃了~
可选值还有:
- xml
- transitional
- srict
- frameset
- 1.1
- basic
- mobile
4.6 设置id或class
标签后面跟上#id
,.classname
,如果没有标签则使用默认标签div
- #content
- p#info
- a.btn
会转换为:
- <div id="content"></div>
- <p id="info"></p>
- <a class="btn"></a>
4.7 1个id和多个class
连着写即可
- a#download-btn.btn.blue-btn
会转换为:
- <a id="download-btn" class="btn blue-btn"></a>
转自:http://www.w3cplus.com/html/jade.html
Jade模板引擎学习(一)安装及基本语法的更多相关文章
- jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- Jade模板引擎学习(二)语法:代码、变量、循环、过滤器及mixin
Jade语法 一.代码 不会被缓冲代码 ul - for(var i=0; i; i++) li Jade Engine 会转换为: <ul> <li>Jade Engine& ...
- Express框架之Jade模板引擎使用
日期:2018-7-8 十月梦想 node.js 浏览:2952次 评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...
- Express全系列教程之(十):jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- artTemplate模板引擎学习实战
在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...
- NVelocity模板引擎学习笔记
NVelocity模板引擎学习笔记 学习模板引擎有一段时间现在做一些总结
- Jade模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- nodejs jade 模板 引擎的使用方法
1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...
随机推荐
- 今日头条 2018 AI Camp 6 月 2 日在线笔试编程题第一道——最大连续区间和扩展
题目 给出一个长度为 n 的数组a1.a2.....ana1.a2.....an,请找出在所有连续区间 中,区间和最大同时这个区间 0 的个数小于等于 3 个,输出这个区间和. 输入描述: 第一行一个 ...
- HDFS essay 2 - Clarify Name Node / Checkpoint Node/ Backup Node
为什么想用英文写了?我获取知识.技术的大部分途径都是通过英文,所以按照自己的理解用英文写下来也比较容易,另外,很多term都是不能翻译的,如果要持续学习技术和知识,那就不但要习惯去阅读,听,还要写,说 ...
- Python3 深浅拷贝
一 定义 在Python中对象的赋值其实就是对象的引用.当创建一个对象,把它赋值给另一个变量的时候,python并没有拷贝这个对象,只是拷贝了这个对象的引用而已. 浅拷贝: 浅拷贝值只拷贝一层,具有自 ...
- POJ 2104 K-th Number(划分树)
Description You are working for Macrohard company in data structures department. After failing your ...
- matlab 直方图均衡化(含rgb)
步骤: 统计原图像素每个像素的个数 统计原图像<每个灰度级的像素的累积个数 家里灰度级得映射规则 将原图每个像素点的灰度映射到新图 代码: clear all I=imread('1.jpg') ...
- 2019寒假训练营第三次作业part2 - 实验题
热身题 服务器正在运转着,也不知道这个技术可不可用,万一服务器被弄崩了,那损失可不小. 所以, 决定在虚拟机上试验一下,不小心弄坏了也没关系.需要在的电脑上装上虚拟机和linux系统 安装虚拟机(可参 ...
- 软工1816 · Alpha冲刺(1/10)
团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 前后端代码规范统一 针对之前的alpha冲刺安排进一步细化任务卡片 明确apl ...
- DNS域名解析协议
一. 根域 就是所谓的“.”,其实我们的网址www.baidu.com在配置当中应该是www.baidu.com.(最后有一点),一般我们在浏览器里输入时会省略后面的点,而这也已经成为了习惯. 根域服 ...
- iOS开发多线程编程2 - NSOperation
1.简介 NSOperation实例封装了需要执行的操作和执行操作所需的数据,并且能够以并发或非并发的方式执行这个操作. NSOperation本身是抽象基类,因此必须使用它的子类,使用NSOpera ...
- BZOJ4811 Ynoi2017由乃的OJ(树链剖分+线段树)
先考虑NOI2014的水题,显然从高位到低位贪心,算一下该位取0和1分别得到什么即可. 加强这个水题,变成询问区间.那么线段树维护该位取0和1从左到右和从右到左走完这个节点表示的区间会变成什么即可,也 ...