Jade模板引擎让你飞
写在前面:现在jade改名成pug了
一.安装
npm install jade
二.基本使用
1.简单使用
p hello jade!
渲染后:
<p>hello jade!</p>
jade安装成功后,进入node命令使用。
2.jade.compile:编译字符窜
> var jade = require('jade')
undefined
> jade.compile('p hello jade!')()
'<p>hello jade!</p>'
3.jade.compileFile:编译jade文件
> var jade = require('jade')
undefined
> jade.compileFile('hello.jade')()
'<p>hello jade!</p>'
>
4.jade.render:渲染html
> jade.render('p hello jade!')
'<p>hello jade!</p>'
5.jade.renderFile:渲染jade文件
> jade.renderFile('hello.jade')
'<p>hello jade!</p>'
>
当jade全局安装后也可以直接使用jade命令。
6.jade filename
C:\Users\Administrator>jade hello.jade rendered hello.html C:\Users\Administrator>
7.jade -P filename 使html文件变得可读
修改hello.jade文件为:
doctype html
html
head
title hello jade!
body
p hello jade
运行:
jade hello.jade
jade.html文件变成这样:
<!DOCTYPE html><html><head><title>hello jade!</title></head><body><p>hello jade</p></body></html>
这样的可读性太差了，不过没事我们有P(pretty)参数
运行:
jade -P hello.jade
hello.html文件变成这样:
<!DOCTYPE html>
<html>
<head>
<title>hello jade!</title>
</head>
<body>
<p>hello jade</p>
</body>
</html>
这样看起来顺眼多了。
8.jade -w filename 监控文件
执行：
C:\Users\Administrator>jade -w hello.jade watching hello.jade
rendered hello.html
一旦我们修改jade文件，html文件会实时修改。此乃神技也，有点像supervisor。
三.常规用法
1.选择器的使用
p.bt.cn#dn
编译后
<p id="dn" class="bt cn"></p>
2.如果省略标签元素，默认是div
.bt.cn#dn
编译后
<div id="dn" class="bt cn"></div>
3.属性的使用
一般属性
div(color='red',font-size='1.5rem')
编译后
<div color="red" font-size="1.5rem"></div>
多个属性如果写一行觉得拥挤的话，可以分开写
div(color='red'
font-size='1.5rem')
style属性
a(style={color:'red'})
编译后:
<a style="color:red;"></a>
带有杠的CSS属性写法
a(style={'z-index':'11000'})
4.字符转义
使用=赋值会进行转义
div(href="https://www.baidu.com/s?wd=jade&ws=jades")
编译后:
<div href="https://www.baidu.com/s?wd=jade&ws=jades"></div>
& 发生了转义 &
使用!=不会转义
div(href!="https://www.baidu.com/s?wd=jade&ws=jades")
编译后:
<div href="https://www.baidu.com/s?wd=jade&ws=jades"></div>
数据库中的字符串这样：萱公子&青橙
很明显被转义了。
显示到前端页面如果继续使用 #{}这样的形式的话，输出的会是萱公子&青橙。肯定是不行的。
这时候，我们可以使用：!{}这样的形式
5.变量的使用
单个变量
- var code = 1;
p.bt #{code}
编译后：
<p class="bt">1</p>
对象
- var code = {z:1,q:2};
p.bt #{code.q}
编译后:
<p class="bt">2 </p>
字符串拼接
- var code = {z:1,q:2};
p(class='bt'+code.z) #{code.q}
编译后:
<p class="bt1">2</p>
6.流程控制语句
Case
- var i=0;
case i
when 0
div 变量为#{i}
when 1
div 变量为1
default
div 没有匹配项
编译后:
<div>变量为0</div>
For
- for(var i=0;i<2;i++)
div #{i} //注意缩进
编译后:
<div>0</div>
<div>1</div>
If...else
- var ifv = true;
if(ifv)
div 为真
else
div 为假
编译后：
<div>为真</div>
7.注释
html可见注释
//html可见注释
div.bt
编译后:
<!--html可见注释-->
<div class="bt"></div>
html不可见注释
//-html不可见注释
div.bt
编译后：
<div class="bt"></div>
多行注释(注意缩进)
//
div.bt
编译后：
<!--div.bt-->
条件注释
<!--[if IE 8]>
<html lang="en" class="ie8">
<![endif]-->
<!--[if IE 8]><!-->
<html lang="en">
<!--<![endif]-->
编译后：
<html lang="en" class="ie8">
<![endif]-->
<!--[if IE 8]><!-->
<html lang="en">
<!--<![endif]-->
8.include
doctype html
html
head
style
include style.css
body
script
include script.js
编译后:（一定要有这两个文件，不然jade会报错）
<!DOCTYPE html>
<html>
<head>
<style>p{
color:red;
}
</style>
</head>
<body>
<script>console.log(1)</script>
</body>
</html>
9.extends与block
layout.jade
doctype html
html
head
title hello jade!
body
block content block foot
business.jade
extends ./layout.jade block content
h1 content主体部分 block foot
h1 foot脚注部分
编译后：
busuness.html
<!DOCTYPE html>
<html>
<head>
<title>hello jade!</title>
</head>
<body>
<h1>content主体部分</h1> <h1>foot脚注部分</h1>
</body>
</html>
10.jade中写行内js或css
doctype html
html
head
style.
p{color:red}
body
script.
console.log(OK)
编译后:
<!DOCTYPE html>
<html>
<head>
<style>p{
color:red;
}
</style>
</head>
<body>
<script>console.log(OK)</script>
</body>
</html>
11.强大的Mixins
mixin templ_li(value)
li #{value}
ul
+templ_li('香蕉')
+templ_li('橘子')
编译后:
<ul>
<li>香蕉</li>
<li>橘子</li>
</ul>
这个特性让我们能自定义一些模板函数。特别是当我们的html结构有相似的时候。
其实跟less中的公共类，react中的公共函数也都是共通的。
less中：
.temp_color(@color:red){
color:@color;
}
//使用
p{
.temp_color(blank);
}
react中:
var temp_prop = {
getDefaultProps:function(){
return {name:'共有属性'};
}
}
//使用
var ComponentDib = React.createClass({
mixins:p[temp_prop ],
render:function(){
return <h1>{this.props.name}</h1>
}
})
Jade模板引擎让你飞的更多相关文章
- Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- jade模板引擎学习笔记（WebsStorm9.0.3+ nodejs+express+jade）
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- Express框架之Jade模板引擎使用
日期:2018-7-8 十月梦想 node.js 浏览:2952次 评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...
- Jade模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- Express全系列教程之(十)：jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- nodejs jade 模板 引擎的使用方法
1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...
- jade模板引擎
最近用jade写了点东西,觉得挺有趣的,是一个有意思的模板引擎. 比如说,像这样的结构的html <span> <i class="icon-edit">& ...
- Express开发实例(2) —— Jade模板引擎
前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...
- 初次入坑jade模板引擎（一）
最近由于工作需要全栈开发,nodejs做后端,在写一个后台管理系统的时候,我一直在考虑用怎样的方式去写,尝试过依然采用前后端分离的结构.使用json数据进行数据交互的模式,但是尝试过才知道,真的很花时 ...
随机推荐
- MVVM框架从WPF移植到UWP遇到的问题和解决方法
MVVM框架从WPF移植到UWP遇到的问题和解决方法 0x00 起因 这几天开始学习UWP了,之前有WPF经验,所以总体感觉还可以,看了一些基础概念和主题,写了几个测试程序,突然想起来了前一段时间在W ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- Android业务组件化之现状分析与探讨
前言: 从个人经历来说的话,从事APP开发这么多年来,所接触的APP的体积变得越来越大,业务的也变得越来越复杂,总来来说只有一句话:这是一个APP臃肿的时代!所以为了告别APP臃肿的时代,让我们进入一 ...
- [原] KVM 虚拟化原理探究 —— 目录
KVM 虚拟化原理探究 -- 目录 标签(空格分隔): KVM KVM 虚拟化原理探究(1)- overview KVM 虚拟化原理探究(2)- QEMU启动过程 KVM 虚拟化原理探究(3)- CP ...
- psoc学习
第一是:项目的路径需要放在Documents and Settings\,也就是默认的文件夹的地方,不然会报错错误范例为:Question:CY8CKIT-023 kit example projec ...
- Angular2 Hello World 之 2.0.0-beta.14
公司现在采用angualrjs开发一些web应用,采用的是angular1,现在angular2已经差不多了,听说最近rc6已经出来了……其实感觉好慢啊!之前也做过一些anglar2的例子,但是没有记 ...
- grep 查找bash脚本中的注释代码
出于安全性的考虑,不建议在bash脚本中注释掉不使用的代码.也就是说如果某段代码不使用了,那么应该删除掉,而不是简单地注释掉.假如你突然意识到这一点,而以前并没有遵从这个原则,现在需要找出脚本中的注释 ...
- 08讲browse命令的使用技巧
.浏览所有parts ,使用技巧 .浏览所有 nets,使用技巧 在上图中选择nets .浏览所有 offpage connector,使用技巧 如上 .浏览所有 DRC makers,使用技巧 5. ...
- Java中的进程与线程（总结篇）
详细文档: Java中的进程与线程.rar 474KB 1/7/2017 6:21:15 PM 概述: 几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进 ...
- 从淘宝 UWP 的新功能 -- 比较页面来谈谈 UWP 的窗口多开功能
前言 之前在 剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记 这篇随笔中介绍了一下 UWP 淘宝的“比较”新功能呱呱坠地的过程.在鲜活的文字背后,其实都是程序员不眠不休的血泪史(有血有泪有史) ...