Pug嵌入

普通变量直接嵌入

- var title = "On Dogs: Man's Best Friend";
- var author = "enlore";
- var theGreat = "<span>转义!</span>";

h1= title
p #{author} 笔下源于真情的创作。
p 这是安全的:#{theGreat}

等价于-->
<h1>On Dogs: Man's Best Friend</h1>
<p>enlore 笔下源于真情的创作。</p>
<p>这是安全的:&lt;span&gt;转义!&lt;/span&gt;</p>

Js表达式嵌入

- var msg = "not my inside voice";
p This is #{msg.toUpperCase()}

等价于-->
<p>This is NOT MY INSIDE VOICE</p>

字符串嵌入,不转义

- var riskyBusiness = "<em>我希望通过外籍教师 Peter 找一位英语笔友。</em>";
.quote
  p 李华:!{riskyBusiness}

等价于-->
<div class="quote">
  <p>李华:<em>我希望通过外籍教师 Peter 找一位英语笔友。</em></p>
</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Pug入门

    Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。

    听着music睡
  • 那些最受欢迎的 Node.js 视图引擎[每日前端夜话0xA7]

    Node js 视图引擎就像 Laravel 中的 Blade。其最基本的定义是,视图引擎是帮助我们用比通常更短、更简单的方式编写 HTML 代码并重用的工具。...

    疯狂的技术宅
  • jade(pug)学习笔记(待填充.......)

    xing.org1^
  • 在 Vue 项目中(vue-cli2,vue-cli3)使用 pug 简化 HTML 的编写

    要注意的一点是: 标签后面如果有属性(括号内的) 他和括号之间不要加空格,加了空格就会被当成字符串解析,详细可查看官方文档

    用户1065635
  • CSS3实现瀑布流布局(display: flex/column-count/display: grid)

    在css3到来之前,都是用js来操作dom元素,计算位置,大小,形成瀑布流布局。但是有了css3之后,一切实现起来就太简单了,没有复杂的逻辑,轻松的几行样式代码...

    Javanx
  • Vue 中使用Pug

    码农笔录
  • Gulp-自动化编译sass和pug文件

    xing.org1^
  • vue - 父组件数据变化控制子组件类名切换

    先说当时的思路和实现 核心是父子组件传值和v-bind指令动态绑定class实现

    xing.org1^
  • 使用Webpack快速配置编写HTML基础环境

    用户1203875
  • 吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧《上》

    之前使用过 Vue 开发后台、中台项目,也做过移动端 H5,弄过一点小的前端架构。每做一个项目都会收获了不一样的经验和理解。下面我把这些点点滴滴的经验总结下来,...

    秋风的笔记
  • 扩展 Vue 组件

    你是否在开发基于 Vue 的 app 时使用过具有相同属性甚至具有相同的 template 结构的组件?

    疯狂的技术宅
  • Express 应用程序生成器/脚手架

    Express官方提供 express-generator 可以快速创建一个Express应用的骨架。

    Javanx
  • Nuxt.js 开发SSR(服务端渲染)Web应用

    Nuxt.js 能够胜任 VuePress 的功能,但它专为构建应用程序而设计,而 VuePress 更适合构建以内容为中心的静态站点,如技术文档,博客等。

    我是一条小青蛇
  • Express服务器开发

    让我们来创建Express应用程序,Express是一个Node.js Web应用框架,它很强大,可以为用户创建各种Web应用和HTTP工具,使用Express...

    达达前端
  • Pug迭代

    听着music睡
  • Pug模板继承与拓展

    如下:便有三个代码块block scripts,block content,block foot

    听着music睡
  • Express新建项目与配置项目热加载

    CherishTheYouth
  • PubChem-简介

    PubChem是一个开放访问数据库,其中的大多数数据均可下载。如果许可协议阻止我们的数据提供者允许批量下载某些数据集,则可能会有例外。

    FindKey
  • Bootstrap相关优质项目学习清单

    王小婷

扫码关注云+社区

领取腾讯云代金券