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. context.Request.Files post 上传问题件

    [无刷新上传] 要实现文件上传,form必须设置几个属性:1.action:设为要处理数据的页面地址:2.method:设为"post":3.enctype/encoding:必须 ...

  2. poj1860--Currency Exchange

    Bellman-ford算法的反向应用--正循环检查 /** \brief poj 1860 Bellman-Ford * * \param date 2014/7/24 * \param state ...

  3. js获取网页宽高

    <script> function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body. ...

  4. Makefile 自动变量之 $(@D),$(@F)

    参考:http://www.gnu.org/software/make/manual/make.html '$(@D)'The directory part of the file name of t ...

  5. 解决错误: ios property has a previous declaration

    今天维护一个项目的时候,我新添加了一个库,运行的时候报错了: ios property has a previous declaration 上网查了一下没有找到思路,不过根据提示自己试了一下,原来这 ...

  6. post请求与get请求

    $.post('/manage.aa', function (response) { agentList = response.data; }, 'json'); var categoryId; $. ...

  7. [JNA系列]Java调用Delphi编写的Dll之JNA使用

    介绍 给大家介绍一个最新的访问本机代码的 Java 框架 —JNA . JNA(Java Native Access) 框架是一个开源的 Java 框架,是 SUN 公司主导开发的,建立在经典的 JN ...

  8. 文件io之——read/write

    read函数从打开的设备或文件中读取数据. #include <unistd.h>ssize_t read(int fd, void *buf, size_t count);返回值:成功返 ...

  9. HTML5坦克大战(1)绘制坦克

    坦克尺寸如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

  10. 跟着百度学PHP[17]-复习PDO的几个关键词

    主要就是复习一下几个关键词.发现太久没有写又忘了.惭愧. final self static const