js pug 代码_pug模版学习(一)
标签
按照html的缩进格式
doctype html
html
head
title
body
编译结果:
文本
p 这是文本
| 这是文本
p.
这是文本
编译结果:
这是文本
这是文本
这是文本
属性
设置class名跟id名(默认是div)
p.foo
p#foo
p#foo.foo
.foo
#foo
编译结果:
其他属性:
a(href="google.com") google
- var foo = true
p(class=foo ? "authed" : "anon")
input(
type="checkbox"
name="agreement"
checked
)
div(data-bar="foo")&attributes({"data-foo": "bar"})
- var attr = {}
- attr.class = "baz"
div(data-bar="foo")&attributes(attr)
编译结果:
注释
// 行注释
//- 编译后不会显示出来
//
块注释
case语句
- var num = 3
case num
when 0
p 这是0
when 1
- break
when 3
p 这是#{num}
编译结果:
这是3
循环
ul
- var n = 0
while n < 4
li= n++
ul
- for (var x = 0; x < 3; x++)
li item
ol
- var list = [1,2,3,4,5,6]
each item in list
li= item
编译结果:
- 0
- 1
- 2
- 3
- item
- item
- item
- 1
- 2
- 3
- 4
- 5
- 6
条件语句
- var user = {foo: "this is foo"}
- var bar = baz
#user
if user.foo
h2.green foo
p.foo= user.foo
else if bar
h2.blue foo
p.foo.
User has no foo
else
h2.red foo
p.foo user has no foo
unless user.isFoo
p 等同于:if !user.Foo
编译结果:
foo
this is foo
等同于:if !user.Foo
mixin 创建重用的代码
mixin list
ul
li foo
li bar
li baz
+list
+list
编译以后:
- foo
- bar
- baz
- foo
- bar
- baz
mixin支持传参
mixin article(title)
.article
.article-wrapper
h3= title
if block
block
else
p NO content provided
+article("Hello worle")
+article("hello pug")
p This is my
p Amazing article
编译结果:
Hello worle
NO content provided
hello pug
This is my
Amazing article
还有:
mixin link(href, name)
a(class!=attributes.class href=href)= name
+link("/foo", "foo")(class="btn")
编译结果:
foo
未知参数:
mixin list(id, ...items)
ul(id=id)
each item in items
li= item
+list("my-list",1,2,3,4)
编译结果:
- 1
- 2
- 3
- 4
Extends 扩展
允许模板来扩展一个布局或父模板,它可以覆盖某些预定义内容块。
//- index.pug
extends layout.pug
block title
title Article Title
block content
h1 My Article
//- layout.pug
doctype html
html
head
block title
title Default title
body
block content
编译结果:
Article Title
My Article
Includes
允许将一个pug文件的内容插入到另一个文件。
在要插入的位置:include 文件地址
//- index.pug
doctype html
html
include includes/head.pug
body
h1 My Site
p Welcome to my super lame site.
include includes/foot.pug
//- includes/head.pug
head
title My Site
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
//- includes/foot.pug
footer#footer
p Copyright (c) foobar
编译结果:
My Site
My Site
Welcome to my super lame site.
Copyright (c) foobar
js pug 代码_pug模版学习(一)相关推荐
- js pug 代码_用JS写的windows95操作系统
README.md 这是Windows95,在Electron应用程序中运行.是的,这是完整的. 它有用吗? 是的,可以.实际上,在macOS,Windows和Linux上.请记住,这完全是用Java ...
- js pug 代码_Vue项目中配置pug解析支持
Vue 的用法没有变化: transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}&q ...
- js pug 代码_jquery.form.js的使用(基于pug)
注:pug就相当于HTML 前端页面 //- 登陆页面的内容书写 extends ../footer append styles link(rel='stylesheet', href='/style ...
- JS基础学习(十):字符串的大小写转换、trim()方法、JS字符串截取和模版字符串
1.字符串的大小写转换 字符串将小写字母转化为大写字母使用:toUpperCase 字符串将大写字母转化为小写字母使用:toLowerCase ASEDECFSXV 转化小写 ...
- 二级分类 php 两张表,PHP_php smarty 二级分类代码和模版循环例子,二级分类的数据表结构如下: - phpStudy...
php smarty 二级分类代码和模版循环例子 二级分类的数据表结构如下: PHP代码如下 复制代码 代码如下: /** @ 文章分类 含二级分类 @ param int $rootnum -- 一 ...
- js逆向案例-rus4逻辑学习
目录 一.RS4特点 二.网站请求流程特点 三.网站加载js的顺序 四.正式逻辑的研究 1.cookie如何定位? 2.扣函数缺啥补啥注意事项? 3.如何获取`$_ts动态变量`值? 4.如何定位`M ...
- Unity创造没有代码的游戏学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小:17.4 GB |时长:17h 18m 你会学 ...
- 1000行python代码_GitHub - kill1000/LearnPython: 以撸代码的形式学习Python
LearnPython 以撸代码的形式学习Python, 具体说明在知乎专栏-撸代码,学知识 ===================================================== ...
- Eclipse.自动提示--编写HTML/CSS/JS/JSP代码时自动提示的解决办法
最近在做一个javaweb的项目,在eclipse中编写jsp代码时没有代码提示这个梗让人很头疼,之前一直写Java代码或者在Dreamweaver中写HTML代码时自动提示代码用起来特别爽,这突然间 ...
最新文章
- 小程序地图多个 circles 使用demo
- Vue 消除Token过期时刷新页面的重复提示
- 从零学PyTorch:DataLoader构建高效的自定义数据集
- el-table 树形表格 自定义展开图标_实践一个树形组件
- Android和IOS网页不一致汇总
- Elasticseach 从零开始学习记录(四) - 整合springboot2.x
- w2008 R2 401 - 未授权: 由于凭据无效,访问被拒绝。
- 移动平均法,滑动平均模型法(Moving average,MA)
- matlab进化树的下载,MEGA官网下载|MEGA进化树 V7.0.26 官方最新版 下载_当下软件园_软件下载...
- 9个offer,12家公司,35场面试,从微软到谷歌,应届计算机毕业生的2012求职之路
- 一张纸的厚度是0.0001米,将纸对折,问对折多少次厚度超过珠穆朗玛峰8848米
- 华为云服务部署Rstudio Server
- c语言 udp 解包_Socket拆包和解包
- 型、T型、K型 热电偶的区别和特点
- 15.1 DIB 文件格式
- 当前提审小程序包中可能包含明文的AppSecret,解决办法
- 西安交大的计算机试题及答案,《大学计算机基础试题及答案》-西安交通大学.doc...
- 基于多元线性回归算法的5G基站能耗模型
- 利用Vector CANOE/CANalyzer的系统变量System Variables观察CAN信号之间的关系
- 联想3110的LC6001B墨盒加墨历程
热门文章
- 【Git】Git-常用命令备忘录(三)
- 明源云·天际,地产⾏业的Salesforce Lightning Platform
- C#9.0 终于来了,您还学的动吗? 带上VS一起解读吧!
- .NET Core开发实战(第28课:工作单元模式(UnitOfWork):管理好你的事务)--学习笔记...
- .NET Core开发实战(第21课:中间件:掌控请求处理过程的关键)--学习笔记(上)...
- Stack Overflow引入CROKAGE,搜问题不用再东拼西凑
- 将传统 WPF 程序迁移到 DotNetCore 3.0
- CefSharp中c#和JavaScript交互读取电脑信息
- 实用帖 | 使用Visual Studio开发.NET Core推荐设置
- Asp.net Core Jenkins Docker 实现一键化部署