您的位置：首页 > Web前端 > Node.js

node模版引擎Jade学习笔记

2016-12-16 09:09 197 查看

学习教程

注意事项

如果想直接运行.jade文件，需要全局安装 jade -> npm install jade –save-dev

jade index.jade -P -w -O index.json 以上命令的意思是：将index.jade文件编译成-P(格式化)、-w(实时监控)、-O index.json(引入index.json文件数据)的html文件

一定要使用空格来缩进(如果使用Tab键，很容易出问题)

建议使用p #{obj}的语法(p #{obj} #{obj}正常编译)，而不是p= obj的语法(p= obj= obj会报错)

关键词前面一律不要加-(如:each、while、else…)

可以在sublime中安装jade代码高亮插件

代码示例

基础语法

doctype html
html
head
meta(charset='utf-8')
title test
//样式语法
style.
body {
background: red;
}
body
div
//id class 属性语法
p#a.b(a='a', b=111) 222333
//换行文本语法
div.
111
222
//声明变量
- var obj1 = {name: 'hvb'}
- var job = '<span>worker</span>'
//对象取值 安全转义 设置属性
p(id='obj1.name', class=obj1.name) #{obj1.name} #{age} #{job} !{job} \#{}
- var obj2 = {a: 1, b: 2}
- var obj3 = [11, 22]
- var obj4 = [{name: 'hvb', age: [1, 2]}, {name: 'hvj', age: [3, 4]}]
//for in 循环
- for (var k in obj2)
p #{obj2[k]}
//each 循环遍历对象
each v, k in obj2
p #{k}: #{v}
//each 循环遍历数组
each v, k in obj3
p #{k}: #{v}
//each 循环嵌套
each v1, k1 in obj4
p #{v1.name}
//3元运算
each v2, k2 in v1.age
span #{v2%2 ? v2+'奇数' : v2+'偶数'}
- var num = 0
//while 循环
while num < 3
p #{num++}
- var index = 2
//if 判断
if index < 2
p 111
else if index >= 2 && index < 4
p 222
else
p 333
//unless 判断
unless index != 3
p 444
//switch 判断
case index
when 1
p 1
when 2
when 3
p 3
default
p 0
//
- var a = 'qqq'
p(b=a) #{a}
//mixin 传参 设置属性(繁琐)
mixin animate(name, pet)
p(id=attributes.id, class=pet) this is #{name} #{attributes.id}
+animate('dog', 'dogs')(id='aDog')
//mixin 设置属性(简便)
mixin animate2(name)
p&attributes(attributes) #{name}
+animate2('sheep')(id='sheep', class='sheep')
//mixin 传参(不固定个数)
mixin animate3(...obj)
p #{obj}
+animate3(1, 2, 3)
//mixin 嵌套
mixin cat(name, say)
+animate(name)
p it can #{say}
+cat('cat', 'miao~')
//mixin 代码块
mixin pig
if block
block
p there are blocks
else
p no block
+pig
p one block
p other block
//定义继承
block desc
p this is block
//引用继承
block desc
script.
var a = 1;
var b = 2;
console.log(a+b)

模版引用include和模版继承extends使用示例

index.jade(主页模版) layout.jade(布局模版) head.jade(头部模版) foot.jade(尾部模版) 此4个文件为同级目录

head.jade

div.head
p this is head

foot.jade

div.foot
p this is foot

layout.jade

doctype html
html
head
meta(chatset="utf-8")
body
include head
block content
include foot

index.jade

extends layout
block content
div.content
p this is content

index.html(由index.jade编译)

<!DOCTYPE html>
<html>
<head>
<meta chatset="utf-8">
</head>
<body>
<div class="head">
<p>this is head</p>
</div>
<div class="content">
<p>this is content</p>
</div>
<div class="foot">
<p>this is foot</p>
</div>
</body>
</html>

使用 node 编译

var jade = require(‘jade’)

// compile 编译

var html1 = jade.compile(‘p #{name}’, {})({name: ‘hvb’})

console.log(‘html1’, html1)

// render 渲染

var html2 = jade.render(‘p #{name}’, {name: ‘hvj’})

console.log(‘html2’, html2)

// rendFile 读取文件渲染

var html3 = jade.renderFile(‘views/index.jade’, {name: ‘hvb’, pretty: true})

console.log(‘html3’, html3)

html2jade(html转jade插件)

全局安装 npm install html2jade -g

局部安装 npm install html2jade –save-dev

保存网页为jade文件(这个有问题。如何解决请告知) html2jade http://www.baidu.com > baidu.jade

转换本地文件 html2jade index.html > index.jade

使用 node 运行

var html2jade = require('html2jade')

// html 转成 jade
html2jade.convertHtml('<div><p>jade</p></div>', {}, function(err, jade) {
console.log(jade)
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 模板引擎 jade node

相关文章推荐

新的分享

章节导航