Jade/Pug模板引擎

1、概述：

Jade是一款基于haml的HTML的模板引擎，采用JavaScript实现，可以方便的在Node.js、Yeoman等框架中使用，已改名为pug。

2、全局安装：

npm install jade -g

3、使用步骤：

（1）在文件夹中，建一个以“.jade”为后缀的文件

（2）在终端中，改变文件目录到当前文件夹下，然后输入命令行

jade test.jade

jade -P test.jade 不压缩html文件

jade -P -w test.jade 监听文件变化实时生成html

（3）Jade基本语法

doctype html

html

head

meta(charset='utf-8')

title 我的网站

body

div

|hehe

a: img(src="#")

div(style={width:"100px",height:"100px"})

测试div

div(class="test") 我是类名为test的div

.test我是类名为test的div

#myid 我是id名为myid的div

.myclass#myids 我是有id也有class的div

-varname= "张三"

div 名字是:#{name}

//我是注释

//

我是注释1

我是注释2

//-我是jade注释

//-

我是jade注释一

我是jade注释二，不会显示在HTML文件

//-for循环

ul

-for(vari= 0;i< 3;i++)

li 我是循环的li

//-数组

-vararr= ["张三","李四","王五"]

forvalinarr

p #{val}

//-对象数组

-vararrs= [{name:"张三",age:"22"},{name:"李四",age:"23"}]

forvalinarrs

p 姓名是#{val.name} 年龄是#{val.age}

//-循环对象

-varobj= {name:"张三",age:22}

foritem,indexinobj

p 下表是#{index} 值是#{item}

//-if else

-varjudge= false

ifjudge

p judge的值是true

else

p judge的值是false

//-switch

-varnum= 3

casenum

when 1

p #{num}的值等于1

when 2

p #{num}的值等于2

when 3

p #{num}的值等于3

default

p #{num}是其他值

//-CSS

style(type="text/css").

.div{

width: 100px;

}

//-JS

script(type="text/javascript").

console.log("1111");

functiontest(){

console.log("我是test函数");

}

//-mixin类似于封装函数

mixin list

ul

-for(vari= 0;i<3;i++)

li 我是li的内容

//-调用mixin

+list

+list

mixin pet(name,sex)

p 宠物的名字是#{name},宠物的性别是#{sex}

+pet("小明","男")

+pet("小红","女")

HTML文件内容将同步为：

Jade/Pug模板引擎相关推荐

前端模板引擎 —— 带你学习Jade / Pug 模板引擎
模板引擎是什么模板引擎是将静态部分糅合的一种实现机制或者技术. 目前使用较广的模板引擎有以下几种:Jade / Pug.EJS.Handlebars. 本文详述Jade / Pug模板引擎在项目开发 ...
pug模板引擎(原jade)
前面的话为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致 ...
pug模板引擎——jade
随着前端项目工程化的发展,代码结构越来越复杂,代码却越来越简单,为了将更多的精力集中在业务功能上面,对页面的快速构建需求日益剧增,同js.css一样,html也出现了各种各样的工具,即模板引擎,本文不 ...
koa + pug模板引擎
模板引擎模板引擎:模板引擎是web应用中动态生成html的工具,负责将数据和模板结合. 常见模板引擎有:ejs.jade(现更名为pug).Handlebars.Nunjucks.Swig等: 使用 ...
pug模板引擎基本用法
一.pug模板引擎基本用法 Pug是jade的新版,jade由于商标已被注册,所以更名为pug. 缩进标注:Pug模板和大多数模板不同,它有自己的语法特点,采用缩进的方式进行标注,使用这种方式,使得代 ...
Node.js(二)——pug模板引擎，nunjucks模板引擎，在koa中使用pug和nunjucks模板引擎
目录 1.知识点及课堂目标 2.模板引擎 3.pug模板引擎使用 3.1安装pug 3.2pug常用语法 3.2.1通过缩进关系,代替以往html的层级包含关系. 3.2.2html 元素属性/sty ...
github项目学习--Vue结合Pug模板引擎
今天看到github上面一个vue项目,用的是Pug模板写的,很多人不知道Pug是什么,但要说到jade,相信很多人反应过来了.没错,Pug前身就叫jade,但是由于商标等问题,改名为Pug,当然,语 ...
lang=pug模板引擎之pug模板语法
今天看到同事的项目 <template lang="pug"> .d-flex.align-center.line-progressdiv(style='width: ...
pug模板语法在vue中的使用--HTML的模板引擎
一. 介绍 pug,原名jade,是流行的HTML模板引擎,,最大的特色是使用缩进排列替代成对标签.它简化了HTML的成对标签的写法,使代码更加简洁.开发效率更高,但是同时它也带来了一些副作用:可移植 ...

Jade/Pug模板引擎

Jade/Pug模板引擎相关推荐

最新文章

热门文章