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. c#.net调用pdf2swf.exe将pdf文件转换为swf,vs中运行正常,布署IIS服务器部署转换后文字部分为空白

    这个是权限问题, 需要在应用程序池中高级设置,将标识改为LocalSystem

  2. excel weekday

    weekday(日期值)=星期几 星期天是1 星期六是7

  3. 李洪强详细介绍SDWebImage

    SDWebImage是一个开源的第三方库,它提供了UIImageView的一个分类,以支持从远程服务器下载并缓存图片的功能.它具有以下功能: 提供UIImageView的一个分类,以支持网络图片的加载 ...

  4. 关于linux PPA源问题

    添加PPA: 1.首先进入ubuntu系统,system—>administration—>update manager—>setting,在软件源界面,点击other softwa ...

  5. Chrome开发者工具之Network面板

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...

  6. SpringMVC返回Json,自定义Json中Date类型格式

    http://www.cnblogs.com/jsczljh/p/3654636.html —————————————————————————————————————————————————————— ...

  7. C++ 类的多态三(多态的原理--虚函数指针--子类虚函数指针初始化)

    //多态的原理--虚函数指针--子类虚函数指针初始化 #include<iostream> using namespace std; /* 多态的实现原理(有自己猜想部分) 基础知识: 类 ...

  8. Data Collection

    众所周知,计算机领域论文是要以实验为基础的,而实验的原料就是数据.不管是在图像,文字或者语音领域,开源的数据都十分宝贵和重要.这里主要收集各领域的一些常用的公开数据集. 计算机视觉: [ImageNe ...

  9. 第一百四十三节,JavaScript,利用封装库做百度分享

    JavaScript,利用封装库做百度分享 效果图 html代码 <div id="share"> <h2>分享到</h2> <ul> ...

  10. List、Map、Set三个接口存储元素时各有什么特点?

    List.Map.Set三个接口存储元素时各有什么特点? 解答: 1)List是有序的Collection,使用此接口能够精确的控制每个元素插入的位置.用户能够使用索引(元素在List中的位置,类似于 ...