jade模板引擎(一)

Jade 是一个高性能的模板引擎,它是用 JavaScript 实现的,并且可以供 Node 使用。

1.首先新建app.js文件

var express = require('express');
//引入express模块
var port =process.env.PORT || 3000;
//设置端口号为process.env.PORT或3000
var app = express();

app.set('views', './views');
app.set('view engine', 'jade');
app.listen(port);

console.log('succesful!');
app.get('/', function(req, res){
	res.render('index', {
		title: 'water 首页'
	})
})
2.进入到命令行中,在app.js文件目录下运行该文件

显示运行成功

3.编写jade文件
//1. 标签就是简单的单词
html
	//2. 标签可以有多个id和class
	#container.text.bar
		//3.1 渲染为<p>wow!</p>
		p wow!
		//3.2 大段的文本,利用管道符号
		p
			|csdn
			|blog
			|jade
		//3.3 也可以用.来开始一段文本 
		p.
			csdn
			blog
			jade 
		//4. 标签文本
		lable username
			input(name="user[name]")
		//5. 标签嵌套
		ul
			li 
				a(href='#') 1
			li
				a(href='#') 2
		//6. case语句(-符号,表示不会被输出)
		-var number = 3
		case number
			when 3
				p apple!
			when 4
				p orange!
			default
				p no fruit!
		//7. =符号表示返回值
		-var ret = 'return'
		=ret
		h1=ret
		//8. 字符串连接
		- var hi = 'hello ' + 'water!'
		p #{hi}
		//9.1 jade中的循环
		ul
			- var items = ["apple", "grape", "straberry"]
			each item in items
				li= item
			//9.2 也可以用for来实现循环
			for item in items
				li= item

在浏览器中显示如下

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值