node pug模板引擎
何聪
模板引擎：模板引擎是web应用中动态生成html的工具，负责将数据和模板结合；常见模板引擎有：ejs、jade（现更名为pug）、Handlebars、Nunjucks、Swig等；使用模板引擎可以是项目结构更加清晰，结构更加合理，让项目维护变得更简单；
pug语法：通过缩进关系，代替以往html的层级包含关系，如 个简单的静态 可以表达为，注意要统一使用tab或者空格缩进，不要混用
内联书写层级,a: img
style属性：div(style={width:”200px”,color:”red”})
使用”-”来定义变量，使用“=”把变量输出到元素内；
通过 #{variable} 插 相应的变量值
html 元素属性通过在标签右边通过括号包含（可以通过判断来添加）
文本通过在 字前 添加竖线符号“|”可让 jade 原样输出内容 在html标签标记后 通过空格隔开 本内容 在html标签标记后通过添加引号“.”添加块级文本
注释：可以通过双斜杠进 注释，jade有3种注释 式，可以分别对应输出html 注释、 输出html注释、块级html注释
循环：each val in [1,2,3]
判断语句：”if else” case when default
mixin：混合模式
include common/footer.pug 通过include引入外部文件
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Document
link(rel="stylesheet",type="text/css" href="index.css")
script(src="one.js" type="text/javascript")
style.
.mydiv{
width:200px;
height:200px;
background:red;
}
body
//- 公共模板哪里需要哪里引入
include common.pug
h1 我是标题
div 我说一个div
div(class="mydiv") 我是类名为mydiv的 div inclide common.pug
.mydiv2(style={width:"100px",height:"100px",background:"yellow"}) 我是第二个div 这种只适用于div
p 我说p标签
.my 我也是一个p
//- 单行注释
//-
我是多行注释
我是也是多行注释
//我是html的注释 会被读取
//
d第一行
第二行
div
| hello
//- 和js的结合使用
//-接收服务器返回的数据
p #{data}
//-使用自身的数据
- let str = "你好"
p #{str}
//- 预告在pug中使用判断，循环，函数，混入模式
ul
each item in users
li 姓名是: #{item.name};年龄是: #{item.age};身高: #{item.height}
- for(let i =0; i< 4; i++)
span 我是循环的数据#{i}
- let num = 1;
case num
when 1
p num 是1
when 2
p num 是2
when 3
p num 是3
default
p num 是其他值
mixin mydiv
div 我是非常常用的div
+mydiv
+mydiv
//- +mydiv哪里需要哪里掉
mixin pet(name,sex)
p 这是一只#{name},他的性别是#{sex}
+pet("泰迪","共有")
+pet("泰迪","共有")
+pet("泰迪","共有")
//- .表示script的结束
script(type="text/javascript").
console.log("你来猜猜这时是啥")
类似资料：