初识pug（jade）

1.所谓的pug就是我们之前说的jade,也就是一种通过缩进的方式来编写代码的过程，在编译的过程中，我们不需要考虑标签是否闭合的问题。此外，用这种编译方式，加快了我们写代码的速度，也为代码复用提供了便捷。

2.在学习pug基础语法之前，首先要了解pug的命令行的使用,例如：

doctype html

html

head

title aaa

body

在文件里面写上述程序，然后以xxx.pug的格式保存，再再终端命令输入 pug xxx.pug,按下回车键，我们在回到之前的项目编译器，就会发现在编译器内出现了与xxx同名的xxx.html文件，点开之后会发现html 基础格式已经打印出来了。但是这里有一个问题，基础格式的排版并不像我们平时书写的格式，这里就需要我们在将pug格式转化为HTML的时候输入命令 pug -P xxx.pug;就可以得到我们想要的格式了。为了实时自动更新出现我们修改后的代码样式，我们还可以这样输入终端命令：pug -P -w xxx.pug;不想继续更新，快捷键为：ctrl+c.

3.路径设置

如果并不希望在当前目录下输入编译后的HTML文件，而是有自定义目录的需求，则需要设置-o参数

如下设置，index.html将输入到a目录下面，如果a目录不存在，则会新建a目录：

pug index.pug -o a

4.重命名：

默认地，编译后的HTML与pug文件同名。如果需要重命名，则可以进行如下设置

通过如下设置，可以同时设置路径和名称

[注意]这里的路径必须提前建立好，否则不会成功

pug

最终，test.html文件被保存到templates目录下。

5.批量编译：

假设编译href下的所有pug文件，则可以这样写：pug href .

6.结构语法：

标签

【树状】

在默认情况下，在每行文本的开头（或者紧跟白字符的部分）书写这个 HTML 标签的名称。使用缩进来表示标签间的嵌套关系，这样可以构建一个 HTML 代码的树状结构

li Item A

li Item B

li Item C

【内联】

为了节省空间， Pug 嵌套标签提供了一种内联式语法

a: img

【自闭合】

Pug知道哪些元素是自闭合的，也可以通过在标签后加上/来明确声明此标签是自闭合的（例如img input 等）

内容

Pug 提供了三种常用的方式来放置内容

【管道文本】

这是最简单的向模板添加纯文本的方法。只需要在每行前面加一个|字符，这个字符在类 Unix 系统下常用作“管道”功能，因此得名

| 纯文本当然也可以包括 HTML内容。

p| 但它必须单独起一行。

【标签内文本】

这实际上是最常见的情况，文本只需要和标签名隔开一个空格即可

p 纯文本当然也可以包括 HTML 内容。

【嵌入大段文本】

有时可能想要写一个大段文本块。比如嵌入脚本或者样式。只需在标签后面接一个.即可

[注意]不要有空格

script.if(usingPug)

console.log('这是明智的选择。')elseconsole.log('请用 Pug。')

属性

标签属性和 HTML 语法非常相似，它们的值就是普通的 JavaScript 表达式。可以用逗号作为属性分隔符，也可以不加逗号

a(href='baidu.com') 百度='\n'a(class='button'href='baidu.com') 百度='\n'a(class='button', href='baidu.com') 百度

【多行属性】

如果有很多属性，可以把它们分几行写

input(

type='checkbox'name='agreement'checked)

【长属性】

如果有一个很长的属性，并且JavaScript运行时引擎支持ES2015模板字符串，可以使用它来写属性值

input(data-json=`{"非常":"长的","数据":true}`)

注释：

单行注释用“//”,不输出注释用“//-”,块注释写法--

body

随便写多少字

都没关系。

今天学的就先介绍到这里，下期继续。

初识pug（jade）相关推荐

搭建Vue2+Vuex+Webpack+Pug(jade)+Stylus环境
一.开发环境配置开始之前,假设你已经安装了最新版本的 node 和 npm. 全局安装 vue-cli 和 webpack : npm install vue-cli webpack -g 创建工 ...
1.2 webstorm设置pug自动编译
一.File->Setting->Tools选择File Watchers,添加Pug/Jade 二.编辑,Program选择已安装好的pug.cmd 三.执行pug -w,右键顶部名称选 ...
html反编译pug,学html5不得不说的html5shiv.js和pug
一.html5shiv.js 首先来说一下关于html5语义化的问题,语义化虽然很好,可是却存在很多兼容问题,经常听见有人抱怨这该死的IE6,7,8,这个时候就要html5shiv.js出马了,这也是 ...
JS+库+框架+工具
JS+库+框架+工具要做WEB前端,就需要知道前端到底是什么,需要学习那些知识:前端至少要懂的三个部分:HTML,CSS,JavaScript(简称JS),那首先先明确这三个概念: HTML负责结构 ...
在vscode中统一vue编码风格的方法
vetur 很多人知道,但在 vscode 下没办法格式化 .vue 里的 html, js 很是头疼,代码风格无法统一. 所以不少人直接拆分开,然后在 .vue 中引入,虽然方法很好,但这有违 .v ...
express web的一款mvc框架
express express相关的网站 *http://expressjs.com/ *http://www.expressjs.com.cn/ *https://github.com/pugjs/ ...
VS Code 的常用快捷键和插件
一.vs code 的常用快捷键 1.注释: a) 单行注释:[ctrl+k,ctrl+c] 或 ctrl+/ b) 取消单行注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u) ...
Vscode----热门插件超实用插件汇总（史上最全）
Vscode----热门插件超实用插件汇总一. 汉化Vscode 二.Vue配件 1. Vetur 2. Vue 3 Snippets 三.配置类插件 1. Auto Rename Tag 2. A ...
VueJS 开发常见问题集锦
VueJS 开发常见问题集锦框架浏览数:416 2017-8-3 由于公司的前端开始转向 VueJS,最近开始使用这个框架进行开发,遇到一些问题记录下来,以备后用. 主要写一些官方手册上没有写 ...

初识pug（jade）

初识pug（jade）相关推荐

最新文章

热门文章