Jade学习中一些需要注意的地方

今天刚接触Jade，好像挺容易上手的，但是有一些地方不注意的话可能会忘记，其他简单的就不说了，中文文档里写的都很清楚，把需要重点记忆的写出来

中文文档
http://www.nooong.com/docs/jade_chinese.htm

1.HTML本质上是XML，在HTML文件的起始位置需定义doctype

doctype html

2.可以用“=”设置元素包含的内容，“=”后的内容会被转码（escaped）。

div= 'If you think you can, <br>you can'
等价于
<div>If you think you can, &lt;br&gt;you can</div>
输出
If you think you can, <br>you can

大小于号被转码了，也就是保持原文本的内容输出，如果不想转码，用“!=”就可以了

div!= 'If you think you can, <br>you can'
等价于
<div>If you think you can, <br>you can</div>
输出
If you think you can,
you can.

里面的<br>作为标签换行使用了
也就是说如果使用“！=”，意味着这个语句，解析器不做任何处理，输出到网页时里面如果有标签，也会发挥标签的作用。

3.标签内部的文本
在下面这种情况时，就不好写了

<div><a href="http://google.com">Google</a>If you think you can, you can.
</div>

如果这样写，If就会被当做标签元素

diva(href="http://google.com") GoogleIf you think you can, you can.

解决方法是添加竖线“|”

diva(href="http://google.com") Google| If you think you can, you can.

这告诉了Jade模板解析器，将后面的内容原样输出，跟前面的！=是类似的，意味着这一行不做任何解析，直接输出给html，再根据标签作用输出到浏览器上。
多行的时候如果不想多按几个“|”，则是用“.”，但是只从“.”下一行开始，本行“.”后面如果有东西会被当做是class属性处理
多行一般用在填充<script>和<style>元素包含的内容

script(type="text/javascript").window.onload = function(){console.log('hello jade');};

还有，如果在“.”的范围里，又想用jade的话，用“#[ ]”就行了

div.My name is #[b CYF]

4.jade嵌入JavaScript代码的时候，必须以“-”开头
例：以下代码相当于循环生成了三个<div>This is div element</div>

- for(var i = 0; i < 3; i++)div This is div element

多行的时候可以每行都加“-”，也可以用下面的方式，让“-”独占一行

-var n = 3;for(var i = 0; i < n; i++)div This is div element

5.jade自带的逻辑语法，可以与Javascript语句结合使用，前面的“-”是可有可无的。
each … in
while
if…else
case

6.mixin复用块
简单来说相当于函数的功能
用+调用

mixin showNamediv CYF
+showName
+showName

同时mixin（复用块）还可以接收一个隐含参数，“块”（block）参数
例：

mixin showName(name)div= nameif block  //如果block存在，则在下面输出block
+showName('CYF')div Welcome to my blog

在上个示例中，在调用时使用了 block 参数，在调用时用缩进的方式写在下面就行了

它还有另一个隐含参数“attributes”，看下面这个例子：

mixin showName(name)div(title!=attributes.title)= name
+showName('CYF')(title='this is your name')

attributes的数据来自第二个“()”。
需要注意的是，这里我们在使用attributes时用的是“!=”，而不是“=”。在这里如果用“=”，表示后面的内容会被转码以纯文本的形式输出，如果用“!=”，表示后面的内容不会被转码，标签指令会发挥他们的作用。

还有更简便的方法传递属性，这样可以将attributes的内容都传给p标签

mixin showName(name)p&attributes(attributes)
+showName('CYF')(id='p',class='pp')

如果不确定参数个数，可以用“…”

mixin list(id, ...items)ul(id=id)each item in itemsli= item
+list('mylist', 1, 2, 3)

Jade学习中一些需要注意的地方相关推荐

triplet loss 在深度学习中主要应用在什么地方？有什么明显的优势？
作者:罗浩.ZJU 链接:https://www.zhihu.com/question/62486208/answer/199117070 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非 ...
少儿编程150讲轻松学Scratch（七）-Scratch学习中需要注意的地方
前言通常Scratch学习流程是,先掌握程序相关模块,并且了解各个模块的功能使用,然后通过项目的编写和练习,不断精进孩子的Scratch技术.那么Scratch学习中有那些需要注意的地方呢? 在所有 ...
深度学习中7种最优化算法的可视化与理解
作者丨小小鱼@知乎来源丨https://zhuanlan.zhihu.com/p/41799394 本文旨在优化一维函数,实际上模型参数有数百万维以上,差距很大,因此本文最好作为辅助法的理解,而非对 ...
一文读懂深度学习中的各种卷积
来源|机器之心我们都知道卷积的重要性,但你知道深度学习领域的卷积究竟是什么,又有多少种类吗?研究学者 Kunlun Bai 发布了一篇介绍深度学习的卷积文章,用浅显易懂的方式介绍了深度学习领域的各种 ...
一文读懂深度学习中的矩阵微积分
点击视学算法标星,更快获取CVML新技术鱼羊编译整理量子位报道 | 公众号 QbitAI 想要真正了解深度神经网络是如何训练的,免不了从矩阵微积分说起. 虽然网络上已经有不少关于多元微积分和线 ...
干货|卷积有多少种？一文读懂深度学习中的各种卷积
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达我们都知道卷积的重要性,但你知道深度学习领域的卷积究竟是什么,又有 ...
AI部署：聊一聊深度学习中的模型权重
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达作者丨Oldpan 来源丨Oldpan博客编辑丨极市平台导读本文简要介绍了模型权重的统计方法,以 ...
深度学习中的Normalization模型（附实例公式）
来源:运筹OR帷幄本文约14000字,建议阅读20分钟. 本文以非常宏大和透彻的视角分析了深度学习中的多种Normalization模型,从一个新的数学视角分析了BN算法为什么有效. [ 导读 ]不 ...
一文概览深度学习中的五大正则化方法和七大优化策略
深度学习中的正则化与优化策略一直是非常重要的部分,它们很大程度上决定了模型的泛化与收敛等性能.本文主要以深度卷积网络为例,探讨了深度学习中的五项正则化与七项优化策略,并重点解释了当前最为流行的 Ada ...

Jade学习中一些需要注意的地方

Jade学习中一些需要注意的地方相关推荐

最新文章

热门文章