Jade学习（三）之语法规则下
jade可以自动识别单双标签
// 1.jade内容：
input(type="button", value="点击")
div
// 此时输出❌error:input is self closing and should not have content，input为单标签不能有内容
Jade中所有自定义标签都认为是双标签
// 2.jade内容：
html
head
body
div
aaa
// 此时输出：
<html>
<head></head>
<body>
<div>
<aaa></aaa>
</div>
</body>
</html>
Jade中原样输出方法一使用“|”
// 3.jade内容：
html
head
script
|window.onload = function(){ // ⚠️一定要相对script缩进，才能出现在script里面
| var oBtn = document.getElementById("btn1");
| oBtn.onClick = function(){
| alert();
| }
|}
body
|aaa
|bbb
|ccc
// 此时输出：
<html>
<head>
<script> window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onClick = function(){
alert();
}
}
</script>
</head>
<body>
aaa
bbb
ccc
</body>
</html>
Jade中原样输出方法二使用“.”
// 4.jade内容：
html
head
script.
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onClick = function(){
alert();
}
}
body.
aaa
bbb
ccc
// 此时输出：
<html>
<head>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onClick = function(){
alert();
}
}
</script>
</head>
<body>
aaa
bbb
ccc
</body>
</html>
Jade中原样输出方法三使用include：可以将html、style、head部分、script等等当成一个整个文件引入到页面中
// 5.jade内容：
html
head
script
include ../a.js
body
include ../a.txt // a.js内容：
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onClick = function(){
alert();
}
} // a.txt内容：
aaa
bbb
ccc // 此时输出：
<html>
<head>
<script>window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onClick = function(){
alert();
}
}
</script>
</head>
<body>aaa
bbb
ccc
</body>
</html>
jade中赋值使用“#{}”
// 6.jade内容：
html
head
script
body
div 我的名字：#{name} // jade2.js内容：
const jade = require('jade');
var str = jade.renderFile('./work/lesson13/view/6.jade',{pretty:true,name:'blue'});
console.log(str); // 此时输出：
<html>
<head>
<script></script>
</head>
<body>
<div>我的名字：blue</div>
</body>
</html>
jade中简写使用“=”赋值
// 简写：
// 11.jade内容：
html
head
script
body
span=a
span=b // Jade7.js内容：
const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/11.jade',{
pretty:true,
a:,
b:
}); console.log(str); // 此时输出：
<html>
<head>
<script></script>
</head>
<body><span></span><span></span></body>
</html>
jade中的数据传递（可以做一些运算）
// 7.jade内容：
html
head
script
body
div 计算结果为：#{a + b} // jade3.js内容：
const jade = require('jade');
var str = jade.renderFile('./work/lesson13/view/7.jade',{pretty:true,a:,b:});
console.log(str); // 此时输出：
<html>
<head>
<script></script>
</head>
<body>
<div>计算结果为：</div>
</body>
</html>
jade中的数据传递（做更多的事情）
// 8.jade内容：
html
head
script
body
div(style=json)
div(class=arr) // jade4.js内容：
const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/8.jade',{
pretty:true,
json:{
width:'200px',
height:'200px',
background:'red'
},
arr:["aaa","bbb","ccc"]
}); console.log(str); // 此时输出：
<html>
<head>
<script></script>
</head>
<body>
<div style="width:200px;height:200px;background:red"></div>
<div class="aaa bbb ccc"></div>
</body>
</html>
jade可以加多个class
// 9.jade内容：
html
head
script
body
div(style=json)
div(class=arr)
div(class=arr class="active") // 这个active将融入进去
div(class=arr)
div(class=arr) // 此时输出：
<html>
<head>
<script></script>
</head>
<body>
<div style="width:200px;height:200px;background:red"></div>
<div class="aaa bbb ccc"></div>
<div class="aaa bbb ccc active"></div>
<div class="aaa bbb ccc"></div>
<div class="aaa bbb ccc"></div>
</body>
</html>
jade中识别代码使用“-”（直接定义变量，直接写js）
// 10.jade内容：
html
head
script
body
-var a=;
-var b=;
div 计算结果为：#{a + b} // 此时输出：
<html>
<head>
<script></script>
</head>
<body>
<div>计算结果为：</div>
</body>
</html>
jade中的循环
// 12.jade内容：
html
head
script
body
-for(var i=; i<arr.length; i++)
div=arr[i] // ⚠️一定要相对for缩进 // Jade8.js内容：
const jade = require('jade');
var str = jade.renderFile('./work/lesson13/view/12.jade',{
pretty:true,
arr:["jhkh","bhiysia","hihn"]
});
console.log(str); // 此时输出：
<html>
<head>
<script></script>
</head>
<body>
<div>jhkh</div>
<div>bhiysia</div>
<div>hihn</div>
</body>
</html>
jade中如何输出html标签？
// 13.jade内容：
html
head
script
body
div #{content} // jade9.js内容：
const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/13.jade',{
pretty:true,
content:"<div>留言</div><p>口红口红打底好看的话</p>"
}); console.log(str); //此时输出：
<html>
<head>
<script></script>
</head>
<body>
<div><div>留言</div><p>口红口红打底好看的话</p></div>
</body>
</html>
⚠️此时我们发现jade自动帮我们将html标签转换成了html实体，防止注入式攻击
❗️注入式攻击：比如留言的时候写了一些标签，做了一些破坏性的操作，如果直接就显示标签会可能带来很大的危害
jade中非转义输出html标签使用“!=”或“!{}”
// 14.jade内容：
html
head
script
body
div!=content ⚠️也可以写成div !{content}// 此时输出：
<html>
<head>
<script></script>
</head>
<body>
<div><div>留言</div><p>口红口红打底好看的话</p></div>
</body>
</html>
jade中使用if-else if-else
// 15.jade内容：
html
head
script
body
-var a=;
-if(a%==)
div(style={width:'200px',height:'200px'})
-else
div(style="width:300px;height:300px") // 此时输出：
<html>
<head>
<script></script>
</head>
<body>
<div style="width:300px;height:300px"></div>
</body>
</html> // other
- var isTrue = true
- var lessons = ['jade','js']
if lessons
if lessons.length>
p more than : #{lessons.join(',')}
else if lessons.length>
p more than : #{lessons.join(',')}
else
p no1 lessons
else
p no2 lessons
jade中使用unless（为false就继续执行）
- var isTrue = true unless !isTrue ⚠️此时判读为false所以继续往下执行
p #{lessons.length}
jade中使用case-when（js的swith）
// 16.jade内容：
html
head
script
body
-var a=; ⚠️因为此处加了“-”所以下面不需要再加了，jade会自动识别代码，如果前面是代码后面也一直是代码就不需要加，目前只在此处做了实验，但10.jade不可以
case a
when
div aaa ⚠️这些都没加“-”，原因见上面
when
div bbb
when
div ccc
default
|不靠谱 // 此时输出：
<html>
<head>
<script></script>
</head>
<body>
<div>ccc</div>
</body>
</html>
⚠️jade都支持js中的语法
jade中使用each-in(js的for-in)
// 遍历对象
-var json={
a:,
b:
} each value,key in json
p #{key}:#{value} // 遍历数组
-var arr = ["aaa","bbb"] each value in arr
p= value ⚠️也可以写成p #{value} // 嵌套循环
- var sections = [{id:,items:['a','b']},{id:,items:['c','d']}]
dl
each section in sections
dt= section.id
each items in section.items
dd= items
jade完整实例
// index.jade内容：
doctype
html
meta(charset="utf-8")
title jade测试
head
style.
div{
width:100px;
height:100px;
line-height:100px;
background:"#ccc";
text-align:center;
float:left;
}
div.last{
background:red;
}
script
body
-var a=;
while a <
if(a%== && a!=)
div.last=a++ / div.last #{a++}
else
div=a++ / div #{a++} // main.js内容：
const jade = require('jade');
const fs = require('fs'); var str = jade.renderFile('./work/lesson13/view/index.jade',{
pretty:true
}); fs.writeFile("./work/lesson13/build/index.html",str,function(err){
if(err){
console.log("编译失败");
}else{
console.log("成功");
}
}) // build内容：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>jade测试</title>
<head>
<style>
div{
width:100px;
height:100px;
line-height:100px;
background:"#ccc";
text-align:center;
float:left;
}
div.last{
background:red;
}
</style>
<script></script>
</head>
<body>
<div class="last"></div>
<div></div>
<div></div>
<div></div>
<div class="last"></div>
<div></div>
<div></div>
<div></div>
<div class="last"></div>
<div></div>
<div></div>
<div></div>
<div class="last"></div>
<div></div>
<div></div>
<div></div>
<div class="last"></div>
<div></div>
</body>
</html>
jade中使用mixin来写代码块(有点像js函数)
案例一：基础
doctype html
html
head
title hello jade
body
mixin lesson // 声明一个mixins
p hello world
+lesson // 使用+加上mixins的名字来调用 // 输出
<!DOCTYPE html>
<html>
<head>
<title>hello jade</title>
</head>
<body>
<p>hello mixin</p>
</body>
</html>
案例二：传参
html
head
script
body
mixin lesson2(name,arr)
p #{name}
ul
each value in arr
li #{value}
+lesson2("wang",["",""]) // 输出
<html>
<head>
<script></script>
</head>
<body>
<p>wang</p>
<ul>
<li></li>
<li></li>
</ul>
</body>
</html>
案例三：嵌套
html
head
script
body
mixin lesson2(name,arr)
p #{name}
ul
each value in arr
li #{value}
mixin lesson3(json)
p #{json.name}
+lesson2(json.name,json.arr)
+lesson3({name:"wang",arr:["",""]}) // 输出
<html>
<head>
<script></script>
</head>
<body>
<p>wang</p>
<p>wang</p>
<ul>
<li></li>
<li></li>
</ul>
</body>
</html>
案例四：传递代码块使用block
html
head
script
body
mixin lesson4(text)
h4 #{text}
if block
block
else
p no text
+lesson4('testing')
p hello world // 输出
<html>
<head>
<script></script>
</head>
<body>
<h4> testing </h4>
<p>block</p>
</body>
</html>
案例五：传属性，实际上传过来的属性参数被存在一个attributes对象中
方法一：
html
head
script
body
mixin lesson5(text)
p #{text}
h4(class=attributes.class,id=attributes.id)
+lesson5('testing')(class="attr",id="id") // 输出
<html>
<head>
<script></script>
</head>
<body>
<p>testing</p>
<h4 id="id" class="attr"></h4>
</body>
</html>
方法二：使用&attributes
html
head
script
body
mixin lesson5(text)
p #{text}
h4&attributes(attributes)
+lesson5('testing')(class="attr",id="id") // 输出
<html>
<head>
<script></script>
</head>
<body>
<p>testing</p>
<h4 id="id" class="attr"></h4>
</body>
</html>
案例六：不确定传参使用"..."
html
head
script
body
mixin lesson5(text,...items)
ul(class="#{text}")
each value in items
li= value
+lesson5('testing','aa','bb','cc') // 输出
<html>
<head>
<script></script>
</head>
<body>
<ul class="testing">
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ul>
</body>
</html>
jade中block的使用
block的默认输出
html
head
script
body
block test
p 哈哈哈 // 输出
<html>
<head>
<script></script>
</head>
<body>
<p>哈哈哈</p>
</body>
</html>
block的调用
html
head
script
body
block test
p 哈哈哈
block test
block test
block test // 输出
<html>
<head>
<script></script>
</head>
<body>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
</body>
</html>
⚠️block可以嵌套
jade使用extends和block实现继承
实例一：基础
// 新建一个文件extend.jade（被继承文件）
html
head
script
body
block desc // 定义block
h4 继承
block test // 调用blcok(test) // jade文件内容（继承文件）
extends extend.jade
block test // 定义block(test)
p 哈哈哈 // 输出
<html>
<head>
<script></script>
</head>
<body>
<h4>继承</h4>
<p>哈哈哈</p>
</body>
</html>
实例二：继承文件里的block会覆盖被继承文件里的block
// 继承文件
extends extend.jade
block test
p 哈哈哈
block desc
h4 覆盖 // 被继承文件
html
head
script
body
block desc
h4 继承
block test // 输出 <html>
<head>
<script></script>
</head>
<body>
<h4>覆盖</h4>
<p>哈哈哈</p>
<h4>覆盖</h4>
</body>
</html>
⚠️继承文件里的block必须在被继承文件里调用，否则不会输出，并且在继承文件中entends要和block同级
jade中的过滤（即使用插件语言less或sass或markdown等）
首先安装相应的插件语言
npm install less sass markdown
之后就可以在jade中使用less了，但不能在其中使用动态数据
style
:less
body{
p{
color:#ccc
}
}
⚠️使用:less、:sass、:markdown等
额外内容
1、变量还是赋值
foo = "hello"
tmp = "world" + "!" h1= foo
span= tmp
对于上面的代码，可能很多人第一眼看到都会有一个疑问，Jade怎么知道等号左边是变量名还是标签呢？
再仔细看看，很快就会发现，又是传说中的空格在作祟，变量后面等号前必须加空格，而标签直接接等号，不能加空格！
2、有三种方法可以原样输出文本，其中“|”和“.”有什么区分？
对于多行文本，如果同时具有子元素的话，使用.会导致无法识别子元素，故需要使用另一种标识符|，但在使用“.”时如果直接是以尖括号开头还是可以识别的
3、如果只有一个子元素，可以使用“:”来嵌套
ul#books
li: a(href="#book-a") Book A
li: a(href="#book-b") Book B
⚠️冒号后面一定要有空格
4、jade中可以对变量进行一些js操作
- var b = "hello"
p #{b.toUpperCase()} world //编译的结果
<p>HELLO world</p>
5、jade中有四种赋值语句
=
#{}
!= (!=不是条件语句中的不等于逻辑运算符，而是非转义html)
- !{} (非转义输出html)
6、想要输出"#"、"!"、"{}"，使用反斜线“\”
div \!{content}
div \#{content}
// 输出
<div>\!{content}{/div}
<div>\#{content}{/div}
7、jade中的注释
“//”单行注释 解析后
html
head
// 哈哈
script
body
div(style=json)
div(class=arr)
div(class=arr class="active")
div(class=arr)
div(class=arr) // 输出
<html>
<head>
<!-- 哈哈-->
<script></script>
</head>
<body>
<div style="width:200px;height:200px;background:red"></div>
<div class="aaa bbb ccc"></div>
<div class="aaa bbb ccc active"></div>
<div class="aaa bbb ccc"></div>
<div class="aaa bbb ccc"></div>
</body>
</html>
⚠️单行注释要和下面的标签同级，否则下面的标签也会被注释
“//-”缓冲注释 解析后 不会显示，也就是不会输出
html
head
//-
script
body
div(style=json)
div(class=arr)
div(class=arr class="active")
div(class=arr)
div(class=arr) // 输出
<html>
<head></head>
<body>
<div style="width:200px;height:200px;background:red"></div>
<div class="aaa bbb ccc"></div>
<div class="aaa bbb ccc active"></div>
<div class="aaa bbb ccc"></div>
<div class="aaa bbb ccc"></div>
</body>
</html>
html
head
//- 哈哈
script
body
div(style=json)
div(class=arr)
div(class=arr class="active")
div(class=arr)
div(class=arr) // 输出
<html>
<head>
<script></script>
</head>
<body>
<div style="width:200px;height:200px;background:red"></div>
<div class="aaa bbb ccc"></div>
<div class="aaa bbb ccc active"></div>
<div class="aaa bbb ccc"></div>
<div class="aaa bbb ccc"></div>
</body>
</html>
⚠️如果我们想要注释掉script，那么注释就不能与script同级，我们发现script和哈哈并没有输出，符合预期
“//”或“/-”块注释 解析后
html
head
script
//body
div(style=json)
div(class=arr)
div(class=arr class="active")
div(class=arr)
div(class=arr) // 输出
<html>
<head>
<script></script>
</head>
<!--body
div(style=json)
div(class=arr)
div(class=arr class="active")
div(class=arr)
div(class=arr)
-->
</html>
条件注释[if IE8]......[end if]
总结：
1、单行注释和多行注释都使用“//”，至于是单行还是多行取决于“//”所在的位置，在有子元素的标签前或嵌套该标签，那么就是块注释也就是多行注释，如果在子元素的前面或嵌套该子元素，并且该子元素没有子元素，那么就是单行注释
2、对于三种注释来说，如果和标签同级，那么不会注释掉任何标签，可以在里面写我们平时写的一些注释
参考：http://www.nodeclass.com/api/jade.html#includes
Jade学习（三）之语法规则下的更多相关文章
- Salesforce LWC学习(三十九) lwc下quick action的recordId的问题和解决方案
本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation ...
- EJS学习（四）之语法规则下
模版函数 在 EJS 之外,提供了一些额外的模版函数来简化我们的一些工作 GIT:https://github.com/willerce/tmt-ejs-helper css()方法 快速的引用 CS ...
- Spring基础学习(三)—详解Bean(下)
一.Bean的生命周期 1.概述 Spring IOC容器可以管理Bean的生命周期,Spring 允许在Bean的生命周期的特定点执行定制的任务. Spring IOC容器对Be ...
- php学习一：语法规则
1.书写规则 在html中嵌入php的时候,需要有结束语,即<?php ...?>,在靠近结束符号的最后一个语句可以不用写分号: 但是在单独的php中,最后可以不用以?>来结尾; 2 ...
- 学习h264 的语法规则，如何才能看懂H264 的官方文档
1. 今天想查h264 的帧率,查找资料如下: 首先要解析sps,得到两个关键的数值: num_units_in_tick, time_scale fps=time_scale/num_units_i ...
- Salesforce LWC学习(三十八) lwc下如何更新超过1万的数据
背景: 今天项目组小伙伴问了一个问题,如果更新数据超过1万条的情况下,有什么好的方式来实现呢?我们都知道一个transaction只能做10000条DML数据操作,那客户的操作的数据就是超过10000 ...
- Python学习系列（四）Python 入门语法规则2
Python学习系列(四)Python 入门语法规则2 2017-4-3 09:18:04 编码和解码 Unicode.gbk,utf8之间的关系 2.对于py2.7, 如果utf8>gbk, ...
- xml学习-语法规则
XML 指可扩展标记语言(eXtensible Markup Language).XML 被设计用来传输和存储数据. XML 语法规则 XML 文档必须有根元素 XML 必须包含根元素,它是所有其他元 ...
- XML 树结构，语法规则，元素，属性，验证及其解析
XML 文档形成了一种树结构,它从"根部"开始,然后扩展到"枝叶". 一个 XML 文档实例 XML 文档使用简单的具有自我描述性的语法: <?xml v ...
随机推荐
- python-Django框架
常用命令 生成应用 python manage.py start app(app_name) 开启服务器 python manage.py runserver 0.0.0.0:8001 声称以及修改数 ...
- sqli-labs(45)
基于报错的password处的')闭合注入 就是没有报错信息 payload和43关一样的构造
- Android Studio基本使用
1. 创建Android项目 1) Application name:应用名称,launcher界面显示的 2) Company Domain:公司域名(sprd.com) 3) ...
- python语言中多继承中super调用所有父类的方法以及要用到的MRO顺序
在python多继承中,利用super().父类方法,可以调用所有父类,从而在重写的状态下,再次对所有父类的调用! 例: print("******多继承使用super().__init__ ...
- localhost与127.0.0.1的区别是什么?
localhost与127.0.0.1的区别是什么?都代表本地服务器 相信有人会说是本地ip,曾有人说,用127.0.0.1比localhost好,可以减少一次解析. 看来这个问题还有人不清楚,其实这 ...
- CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name, id ...
- java基本算法
1.链表 链表用来存储数据,由一系列的结点组成.这些结点的物理地址不一定是连续的,即可能连续,也可能不连续,但链表里的结点是有序的.一个结点由数据的值和下一个数据的地址组成.一个链表内的数据类型可以是 ...
- C++动态链接库实践
参考:https://www.cnblogs.com/Anker/p/3746802.html gcc -fPIC -shared calc.c -o libcalc.so, 编译得到 在linux上 ...
- WikiData Processing
WikiData Processing Data Accessing To download latest-all.json.bz2 on the page https://dumps.wikimed ...
- 浏览器端-W3School-HTML：HTML DOM Style 对象
ylbtech-浏览器端-W3School-HTML:HTML DOM Style 对象 1.返回顶部 1. HTML DOM Style 对象 Style 对象 Style 对象代表一个单独的样式声 ...