pug模板引擎——jade

随着前端项目工程化的发展,代码结构越来越复杂,代码却越来越简单,为了将更多的精力集中在业务功能上面,对页面的快速构建需求日益剧增,同js、css一样,html也出现了各种各样的工具,即模板引擎,本文不研究各种模板引擎的实现技术原理,主要介绍jade的使用;

1.常见的模板引擎的

常见的模板引擎有mustache、Handelerbars、Underscore Templates、ejs(Embeded JS Templates)、jade
各种模板的比较可以参考我的另外一篇文章传送门
本文主要介绍pug模板引擎的使用,pug原名不叫pug,而是众所周知的jade,jade中文含义为美玉翡翠,其原来的logo为一只精灵的白兔,而pug中文含义为哈巴狗,现在logo也改成了憨态可掬的哈巴狗,至于为何将美玉改为哈巴狗,该开源项目在github给出的解释为jade的商标被人抢先注册了(这个理由也是让人服);

2.pug结构语法

pug模板引擎兼容html,即可以在代码中直接书写html;

  1. 标签:
    - 默认在每行文本开头(或紧跟白字符部分)书写html标签的名称;
    - 使用缩进来表示标签之间的嵌套关系
    - 自动识别闭合和非闭合标签,也可以在标签后加上/显示声明闭合标签

     如:```diva: p 这里是输出字符```渲染结果:`<div><a><p>这里是输出字符</p></a></div>`
  2. 内容
    - 管道文本:最简单的向模板添加纯文本的方法,在空白或标签后加上一个|字符,如:p | 这里是管道文本
    - 标签内文本:标签内添加文本,在索要添加的文本和标签元素之间输入一个空格即可,如:p 这里是标签内文本
    - 嵌入大段文本:在标签后输入一个.即可,注意标签和.之间无空格,如插入脚本:

         ```script. if (true)console.log('这里是脚本片段1');elseconsole.log(‘这里是脚本片段2’)```
  3. 属性
    - 单行属性:标签属性与html语法相似,及普通js表达式,多个属性间用逗号或空格分隔,如:a(href=''baidu.com'',class='link') 百度
    - 多行属性:多行属性与单行属性类似,分多行些即可;
    - 长属性:长属性按照JS表达式书写即可;
    - 特殊字符:特殊字符可用''或""括起来即可,如:div(class='box' "(click)"="play()"
    - 转移属性:默认情况下,所有属性都经过转义(即将特殊字符串换成转义序列)来防止跨站脚本攻击之类方式
    - 布尔值:布尔值可直接使用,不指定值时默认为true;
    - class和id: 类可以使用.className、id使用#idname语法来使用,如:a.btn p#content
    - 行内样式:样式属性与其他属性一样,可以为字符串或对象,如:a(style={color:'red',background:'#333'})
  4. 注释
    - 单行注释:与javascript注释类似,采用//此时注释会输出,//-此时注释不会输出;
    - 块注释:与javascript类似,采用//换行即可;
    - 条件注释:
  5. JS代码
    - 不输出的代码:用-符号开始一段不直接输出的代码;
    - 输出的代码: 用=符号开始一段代码;
    - 不转义的输出代码:用!=开始的代码不会被转义;
  6. 变量
    pug文件中变量来源有三种,其内部变量优先级最高,其余两种按命令先后顺序,以后面的为准:
    ①pug文件内部,直接使用,如:-var name='内部变量'
    ②命令行参数:使用--obj参数在命令行中传递,如pug test.pug -P -w --obj "{name:'命令行参数'}"
    ③外部json文件:使用-O 跟随一个文件路径名,如pug test.pug -P -w -O test.json
    - 内容变量:使用=#{}来进行真实变量的替换,如:

         ```- var url='baidu.com';p | 链接地址为 #{url}a(href=url)```- 
  7. 条件
    pug的条件语句类似于JavaScipt,不同之处在于不用书写(){}符号;
  8. 循环
    pug目前支持两种主要迭代方式:each和while
    - each:如'each value,index in [1,2,3,4,5]';
    - while:
  9. 混入
    混入允许pug中重复使用一整个代码块、传入参数的方法,同时也支持属性方式传入参数;如:

     ```mixin list(name)p #{name}+list(复用1)+list(复用2)(class='btn')```
  10. 文件包含
    包含(include)功能允许把另外的文件内容插入进当前文件,如果包含文件为js或css则会当做文本引入如:

    ```//- index.htmldoctype htmlhtmlinclude includes/header.pugbody// index.html文件内容include includes/footer.pug
    `` `
  11. 文件继承
    - 覆盖:使用blockextends关键字进行模板的继承,一个称之为块的代码块,可以被字模板覆盖替换。该过程是递归的。
    - 扩展:语序去替换(默认的行为),prenpend(向头部添加内容)、或appned(向尾部追加内容)

--end

转载于:https://www.cnblogs.com/hbzyin/p/7752542.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/467444.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

广东,就是这么横?

昨晚的稿 今天发一下 应该有好久好久没有写篮球相关的文章了&#xff0c;因为之前写了被骂了&#xff0c;不过&#xff0c;今天不一样&#xff0c;毕竟方超巨打得这么好&#xff0c;不吹一下&#xff0c;总感觉今天不完整&#xff0c;骂就骂了吧&#xff0c;反正也不差这一次了…

在ASP.NET中利JavaScript实现控件的聚焦

在Windows应用程序中很容易控制控件的聚焦&#xff0c;但是在ASP.NET中并没有提供这样的功能&#xff0c;但是我们同样可以实现这样的功能&#xff0c;这篇文章就讲述了通过JaveScript实现在页面上某一特定控件获得焦点的功能。 下面是用到的JavaScript代码。 <script langu…

mysql自动备份发邮箱,定时任务自动备份数据库并邮件发送

我原本是使用Vastar的第一个脚本方案来自动备份WordPress数据库并邮件发送的&#xff0c;不过后来因为更换服务器&#xff0c;不知道为什么造成了会二次备份并有错误提示。刚好Vastar又给了一个更简洁的方法&#xff0c;于是昨天就替换掉了。不过Vastar的是同时备份数据库和网站…

电厂各类设备原理动图,绝对让你看花眼!

▲ 火力发电流程原理▲ 核能发电流程原理▲ 水力发电流程原理▲ 光热发电原理▲ 垃圾发电原理▲ 蒸汽吸收式制冷原理▲ 尿素热解脱硝流程原理▲ 湿法脱硫工艺原理▲ 钢球磨煤机内煤的破碎原理▲ 碎煤机工作原理▲ 螺旋输送机&#xff08;绞龙&#xff09;原理▲ 多管电除尘器▲…

也谈MMU管理机制

1&#xff0c;结构&#xff1a; MMU存储器系统的结构允许对存储器系统的精细控制。大部分的控制细节由存在存储器中的转换表提供。这些表的入口定义了从1KB 到1MB 的各种存储器区域的属性。这些属性包括&#xff1a; 虚拟地址到物理地址映射 ARM 处理器产生的地址叫虚拟…

__ATTRIBUTE__ 你知多少?

_ATTRIBUTE__ 你知多少&#xff1f; 1 #include "stdio.h"2 3 /* 地址参考基准 */4 5 char r1;6 short r2;int refer;7 8 struct p9 { 10 int a; 11 12 char b; 13 14 short c; 15 16 }__attribute__((aligned(4))) pp; 17 /* 4字节对齐&#xff0c;a…

oracle 根据分隔符提取,oracle自定义函数按照某个分隔符拆分字符串

1.首先需要定义一个集合类型&#xff0c;我这里定义的是变长数组类型(VARRAY)create type type_splitstr is varray(1024) of varchar2(128);--注意&#xff0c;我这里之所以不用嵌套表类型(NESTED TABLE)&#xff0c;是因为oracle官方文档有如下说明。--Nested Tables: The in…

跟几位大佬共进晚餐

这是一篇几个程序员大佬聚会的聚后感文章这次聚会比较唐突&#xff0c;连总从广州专门开车来深圳看望我们&#xff0c;我们约在了某个地铁站的八合里牛肉火锅店&#xff0c;这是一个周五的下午&#xff0c;理论上是非常简单的一个周五&#xff0c;但是因为这些男人女人的存在&a…

vue.js框架搭建

安装脚手架 前提条件&#xff1a;已安装node&#xff08;4.0版本以上&#xff09;&#xff0c;npm a、全局安装 vue-cli npm install -g vue-cli 安装成功后可以通过命令行查看版本号&#xff0c;如图 b、初始化项目 新建一个文件夹命名为01vue&#xff0c;准备在此文件夹下存放…

oracle数据库imp导入,imp 导入 没有数据库

IMP-00009: 导出文件异常结束今天准备从生产库向测试库进行数据导入&#xff0c;结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误&#xff0c;google一下&#xff0c;发现可能有如下原因导致imp的数据太大&#xff0c;没有写buffer和commit两个数据库字符集不同从…

MIK C语言面试两题

这是一个读者朋友在知识星球上提到的两个笔试题&#xff0c;第一个题目比较简单&#xff0c;关键在第二个题目「编程题」&#xff0c;我文章中写的解题思路应该不是最好的&#xff0c;希望大神读者们给出更好的答案&#xff0c;让这个充满乐趣的程序世界再增添一些乐趣吧&#…

[听尉迟方侃侃]平台

很长一段时期我都不能理解什么叫做平台。这个平台那个平台&#xff0c;随随便便的东西都要带上“平台”两个字以期蓬荜生辉。搞得人很是反感。 查了一下金山词霸&#xff0c;对平台一词有两个解释和软件行业相关&#xff1a; 解释1、[platform] ∶ 通常高于附近区域的平…

Swift基础学习(二)数据类型

在编程语言中&#xff0c;不同的数据信息需要不同的数据类型来存储&#xff0c;计算机内存中针对不同的数据类型它们所分配的内存大小是不同的&#xff0c;特定的值需要特定的类型来声明。 Swift 数据类型 内置数据类型 整数 - Int & UInt 根据一个整数变量占据的内存空间&…

看看大疆的C语言面试题

惯例&#xff0c;这笔试题也是一个读者朋友发给我的&#xff0c;简单看了下&#xff0c;并不觉得这是一个非常困难的题目&#xff0c;最近是校招准备的时候&#xff0c;很多人给我说发面试题对大家有帮助。这个题目面试官强调了这个跑在64位系统下。代码如下:#define mal(x,y) …

php三级栏目调用,织梦当前栏目调用二级、三级栏目且栏目高亮解决方法

在处理企业站的时候&#xff0c;经常发现要调用二三级栏目栏目&#xff0c;且需要高亮显示&#xff0c;具体实现方法如下。1、打开 \include\taglib\channelartlist.lib.php 找到$tpsql " reid$typeid AND ispart<>2 AND ishidden<>1 ";改成if($typeson…

RocketMQ实战(一)

阿里巴巴有2大核心的分布式技术&#xff0c;一个是OceanBase&#xff0c;另一个就是RocketMQ。在实际项目中已经领教过RocketMQ的强大&#xff0c;本人计划写一个RocketMQ实战系列&#xff0c;将涵盖RocketMQ的简介&#xff0c;环境搭建&#xff0c;初步使用、API详解、架构分析…

C面试总结文档

最近很多人有参加面试&#xff0c;面试就避免不了笔试&#xff0c;嵌入式面试的话&#xff0c;避免不了C语言&#xff0c;所以给大家准备了两份pdf C语言面试总结的文档。在本公众号回复 「C面试」获取pdf下载链接推荐阅读&#xff1a;专辑|Linux文章汇总专辑|程序人生专辑|C语…

linux下根据端口查进程,linux根据进程查端口,根据端口查进程

[roottest_environment src]# netstat -tnllup 能显示对应端口和进程Active Internet connections (only servers)Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program nametcp 0 0 0.0.0.0:111 0.0.0.0:* LISTEN 1/systemdtcp 0 0 0.0.0.0:6000 0.0.0.0:*…

程序员到底怎么了

我们是这样的一群人&#xff1a;每天都在“努力”的工作着&#xff0c;每天都和计算机打交道&#xff0c;泡在网上&#xff0c;打游戏&#xff0c;查资料&#xff0c;发微博。可是有一天&#xff0c;突然意识到&#xff0c;我们的未来在哪里&#xff0c;每个月那点可怜的工资&a…

SQLServer查询表结构

SELECT 表名case when a.colorder1 then d.name else end, 表说明case when a.colorder1 then isnull(f.value,) else end, 字段序号a.colorder, 字段名a.name, 标识case when COLUMNPROPERTY( a.id,a.name,IsIdentity)1 then √else end, 主键case when exists(SELECT 1 F…