Getting Started – Pug https://pugjs.org/api/getting-started.html

GitHub - Tencent/wepy: 小程序组件化开发框架 https://github.com/Tencent/wepy

<template lang="pug">
view(class='container')
view(class='userinfo' @tap='tap')
mycom(:prop.sync='myprop' @fn.user='myevent')
text {{now}}
</template> 多会企业版 - 专属线下活动平台 https://www.duohui.cn/enterprise#features Attributes – Pug https://pugjs.org/language/attributes.html

Here are some alternatives you can use to include variables in your attribute:

  1. Simply write the attribute in JavaScript:

     
    - var url = 'pug-test.html';
    a(href='/' + url) Link
    |
    |
    - url = 'https://example.com/'
    a(href=url) Another link
     
     
    <a href="/pug-test.html">Link</a>
    <a href="https://example.com/">Another link</a>
     
  2. If your JavaScript runtime supports ES2015 template strings (including Node.js/io.js 1.0.0 and later), you can also use its syntax to simplify your attributes:

     
    - var btnType = 'info'
    - var btnSize = 'lg'
    button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize)
    |
    |
    button(type='button' class=`btn btn-${btnType} bt
    

    Style Attributes

    The style attribute can be a string, like any normal attribute; but it can also be an object, which is handy when styles are generated by JavaScript.

     
    a(style={color: 'red', background: 'green'})
     
    <a style="color:red;background:green;"></a>
     

pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an argument.的更多相关文章

  1. How to compile and install Snort from source code on Ubuntu

    http://www.tuicool.com/articles/v6j2Ab Snort is by far the most popular open-source network intrusio ...

  2. XML.ObjTree -- XML source code from/to JavaScript object like E4X

    转载于:http://www.kawa.net/works/js/xml/objtree-try-e.html // ========================================= ...

  3. How to Build MySQL from Source Code on Windows & compile MySQL on win7+vs2010

    Not counting obtaining the source code, and once you have the prerequisites satisfied, [Windows] use ...

  4. How to compile and install Linux Kernel 5.1.2 from source code

    How to compile and install Linux Kernel 5.1.2 from source code Compiling a custom kernel has its adv ...

  5. Indenting source code

    Artistic Style 1.15.3 A Free , Fast and Small Automatic Formatterfor C , C++ , C# , Java Source Code ...

  6. [转]Native Java Bytecode Debugging without Source Code

    link from:http://www.crowdstrike.com/blog/native-java-bytecode-debugging-without-source-code/index.h ...

  7. UI5 Source code map机制的细节介绍

    在我的博客A debugging issue caused by source code mapping里我介绍了在我做SAP C4C开发时遇到的一个曾经困扰我很久的问题,最后结论是这个问题由于Jav ...

  8. Tips for newbie to read source code

    This post is first posted on my WeChat public account: GeekArtT Reading source code is always one bi ...

  9. 编程等宽字体Source Code Pro(转)

    Source Code Pro - 最佳的免费编程字体之一!来自 Adobe 公司的开源等宽字体下载     每一位程序员都有一套自己喜爱的代码编辑器与编程字体,譬如我们之前就推荐过一款"神 ...

随机推荐

  1. unity, 判断可见性

    如果一个物体被unity判定为”退一万步讲也一定不可见“,则unity不会去渲染它,但是如果我们给此物体添加了逻辑,这个逻辑仍然会被执行. 因此,假如这个逻辑是巨耗性能的逻辑,比如说”mesh的每个顶 ...

  2. linux下的几个cd命令

    linux cd命令 cd data 进入到 data 目录 cd .. 返回上级文件夹 cd ~ 返回用户主文件夹 cd / 返回根文件夹

  3. 转:python之如何在某文件中调用其他文件内的函数

    假设名为A.py的文件需要调用B.py文件内的C(x,y)函数 情形1:在同一目录下, (1) import B if __name__ == "__main__": B.C(x, ...

  4. jQuery - 获得内容和属性

    jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...

  5. 40. Implement Queue by Two Stacks【medium】

    As the title described, you should only use two stacks to implement a queue's actions. The queue sho ...

  6. cp/scp命令详解

    cp:拷贝命令 用法: cp [参数] source dest cp [参数] source ... directory 说明:将一个档案拷贝至另一个档案,或数个档案拷贝到另一目录 参数: -a 尽可 ...

  7. eclipse的源代码编辑窗口可以拖出来单独使用的哦

    这在你边阅读文档边写代码的时候非常有用的!整个eclipse窗口吧,太大,挡事,把源代码编辑的标签拖出来,就成为一个单独的窗口了,也就记事本大小,而且代码提示自动补全什么的一样不少~ 虽然这个代码编辑 ...

  8. Bootstrap学习笔记(1)栅格系统

    栅格系统: .row 1行12列 .col-md-3 占3列,一行就是4个 <!DOCTYPE html> <html lang="en"> <hea ...

  9. ECMall中Widgets模式的布局引擎

    自己做过框架的人,可能都会思考一个问题,模板引擎需要什么特性? Widgets模式,很多系统中都有出现,但对于纯开发人员,不管前端或后台人员来说,都觉得稍微麻烦了一点.因为他将界面硬生生的拆分出了很多 ...

  10. adb 安装apk到指定手机 登录shell

    电脑链接多个设备时,给指定的设备安装apk, 1. 先查看手机的编码 adb devices 2. adb -s 手机编码 install xxx.apk 如果是无线链接调试状态,adb device ...