曲振飞的个人博客

专注于Web全栈开发、APP设计、网站建设

当前位置 : 主页 > 前端开发 > 前端模板引擎Jade入门篇语法总结

前端模板引擎Jade入门篇语法总结

时间:2016-11-13 21:03:41 栏目:前端开发 作者:曲振飞 点击: 654

Jade是一款高性能且简单易懂的模板引擎,基于nodejs的运行环境,在express框架使用jade作为前端模板来渲染页面。

jade安装

npm install -g jade  全局安装
jade --version 查看jade版本

jade编译

jade index.jade 压缩后的代码,可读性不好
jade -P index.jade 带缩进关系的压缩,可读性好,注意这里的p为大写的P
jade -P -w index.jade 一旦文件变化、就会实时编译

为标签元素添加属性Class、id:

h1.title#one jade模板的学习与使用 添加一个class为title,id为one
<h1 id="one" class="title">jade模板的学习与使用</h1>

也可以在元素标签后面紧跟一个括号,在括号里面来写元素的属性

a(href="http://www.qzfweb.com",title="Web全栈学习") Web全栈学习
<a href="http://www.qzfweb.com" title="Web全栈学习">Web全栈学习 </a>

input标签的书写方式,在圆括号里有些属性(比如checked)也可不加等号

input(name="user",type="text",value="请输入姓名")
input(name="like" type="checkbox" checked)
<input name="user" type="text" value="请输入姓名">
<input name="like" type="checkbox" checked>

在p标签中多行文本的显示方式,在p后紧跟一个点

p.
    1. aa
    2. bb
    3. cc
    4. dd

jade注释

1.单行注释:
// 注释的内容会被编译在html内容里
2.非缓冲注释
//-  注释的内容不会被编译在html内容里
3.块注释
由于缩进关系,在这个缩进符号以内的都会被注释
//- 
    p.
        1. aa
        2. bb
        3. cc
        4. dd

嵌入css和js 样式

body
    style.
        body{color:blue;}
    script.
        alert("1");

jade 变量声明和数据传递

1.在html中声明js变量
- var name = "jade";
title #{name.toUpperCase()} 模板学习
2.后台命令行方式传入数据
jade -P -w --obj '{"name":"jade"}' index.jade
title #{name.toUpperCase()} 模板学习
3.通过json文件传入数据
index.json
{
"name":"jade2"
}
后台编译
jade -P -w -O index.json index.jade
前端数据传递
title #{name.toUpperCase()} 模板学习

转义和非转义

如果是纯文本,则转义和非转义的结果都是一样的

- var data = "text";
p #{data}
p !{data}

如果含有可执行脚本和html标签的会被进行安全转义

- var newData = "<script>alert(1)</script><span>script</span>"
p #{newData} #{}进行安全转义
p !{newData} !{}输出非转义字符

还可使用等号(=)输出

p= newData
p!= newData

如果想在网页中显示#{}这种格式 需要使用\反斜线 转义

p \#{newData}

在input中输出

input(value='#{htmldata}') 如果没有值则会出现undefined
input(value=htmldata) 这种写法如果没有值,则不显示

流程代码

jade支持javascript的原生代码

for遍历

- var admin = {name:'张三',age:20,sex:'男'}
- for(var value in admin)
    p= admin[value]

each遍历,前面的横线 可省略

each value,key in admin
    p #{key}:#{value}

嵌套遍历

- each section in sections
    dl
        dt= section.id
        each item in section.items
                dd= item

while循环

- var n = 1
ul
while  n < 4
li= n++

if else语句

- var lessons = ['zs','ls']
if lessons
	if lessons.length > 2
		p 大于2 #{lessons}
	else if lessons.length > 1
		p(style="color:yellow;") 大于1 #{lessons}
	else 
		p no lessons1
else
	p(style="color:red;") no lessons2

unless相当于if的反向判断

- var isname = true;
unless !isname
	p #{isname}

switch语句在jade里面 可以变为case和when来实现

case name
	when "java"
		p Hi #{name}
	when "jade" : p Hi #{name}
	default
		p Hi #{name}

mixin可以使jade的标签内容重用

mixin lession
	p p标签
+lession
mixin的传参
mixin study(name,courses)
	p= name
	ul.cour
		each course in courses
			li= course
+study('Jack',['jade','java'])
mixin的嵌套
mixin group(student)
	h4 #{student.name}
	+study(student.name,student.courses)
+group({name:'Tom',courses:['jade','node']})


关键字:

关于站长

曲振飞,一个热忠、从事于互联网的90后青年.专注于网站建站、网站设计及优化.以用户体验、WEB标准为主旨,将网站的整体设计与网页设计的相关原理紧密结合.