jade入门与初步使用

一、认识jade

1、什么是jade

Jade是一个基于javascript，可以运行在node与浏览器环境的一个前端模板引擎，可以实现前后端渲染的统一

2、jade的优点

简洁和高效

Jade是为了提高前端开发人员的效率而产生的。Jade中，空格、换行、缩进都是有意义的

它省略了html中的闭合标签

3、安装

现在的jade改名为pug，所以：

npm install pug

二、jade的语法

1、Doctype

doctype html

2、标签

类似python的缩进

3、属性

input(type='checkbox', checked)

4、代码嵌入

（1）加一个" - "

- for (var x = 0; x < 3; x++)

（2）使用 =

p
= 'This code is <escaped>!'

（3）使用 !=

5、插值语法

预先指定一个位置，方便以后插入一个新值，简称插值，即为 #{ }

- var theGreat = "<span>escape!</span>";
p This will be safe: #{theGreat}

6、遍历

使用each

// 遍历数组
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val

// 遍历对象
ul
each val, index in {1:'one',2:'two',3:'three'}
li= index + ': ' + val

7、混合宏（mixins）

需要使用 mixin 标识符，创建混合宏实例时，需要使用 + 标识符：

//- Declaration
mixin list
ul
li foo
li bar
li baz
//- Use
+list
+list

html效果：

8、includes
实现高度复用的另一种方式就是将代码片段保存到不同文件中

include ./includes/head.jade

9、继承
Jade 中使用 extends 来继承代码片段，与 include 本本分分地引用代码段不同，继承可以修改代码片段。
首先，在 layout 页面使用 block 标识符，设置一个可修改的代码片段，紧跟 block 标识符之后的是该代码片段的名字：
//- layout.jade
doctype html
html
head
block title
title Default title
body
block content
然后，在 index 页面继承 layout，并可以根据代码片段的名字修改相关代码：
//- index.jade
extends ./layout.jade
block title
title Article Title

如果想要追加代码片段，可以使用 append 和 prepend 指令

10、jquery

如果想在页面写jquery函数，则：script.

注意，那个点很重要，否则报错

11、jade中写html

加个 " | " 即可

jade入门与初步使用相关推荐

Java高并发入门-线程初步
Java高并发入门-线程初步线程与进程之间的关系进程就是我们运行在计算机上的一个程序,对应Java程序来说就是运行在计算机上的Java应用程序,这个程序在运行的时候就会创建了一个进程,服务器上就会 ...
Java高并发入门-线程初步（二）
Java高并发入门详细讲解上期回顾及问题总结上次说了创建线程的两种常用方式,第三种方式在后面的更新中会讲解到.这里对于上一节的内容做个回顾. 在上一节中说到了创建多线程的问题,分析了Thread的 ...
Node.js模板引擎： Jade入门
Jade是Node.js的一个模板引擎,它借鉴了Haml的很多地方,所以语法上和Haml比较相近.并且,Jade也支持空格. 1.标签在Jade里,一行开头的任何文本都被默认解释成HTML标签.并且 ...
Scrapy入门学习初步总览
OK,因为数据分析的缘故需要采集一些数据,所以学了一段时间的爬虫,但都是利用urllib,requests,Beautifulsoup采取一些小规模的数据,感觉并不顺手,所以从今天开始进入scrapy ...
Arthas简单入门与初步实践
Arthas又是国内牛逼JAVA大哥阿里巴巴开源的Java诊断工具,(真的给跪了,这才叫真的技术,整天写CRUD的都是
NoesisGUI入门及初步使用感想
这段时间一直在使用NoesisGUI,这是一种使用Xaml作为界面语言的UnityUI,前端界面开发方式与WPF无异,使用不难.缺点是官方的demo给的不是很足,并且文档严重不全.并且不能使用类似wp ...
微信小程序入门：初步了解官方文档（循环、视图容器、icon、image）
今天是正式学习微信小程序的第一天,学习微信小程序先从了解官方文档开始吧. 这一节开始学习微信小程序官方文档中的for循环.视图容器.icon.image等. 打开index文件夹下的index.wxm ...
Flask入门学习---初步了解模板
1.为什么需要模板引擎(template engine)? 在上面的例子中,我们视图函数向客户端返回一行HTML代码.当有大量HTML代码的时候,我们应该将它们都存储在一个文件里面,从而让控制器和用户 ...
【教程】PyG入门，初步尝试运行第一行GNN代码
转载请注明出处:小锋学长生活大爆炸[xfxuezhang.cn] Colab Notebook 安装必备的库 # Install required packages. import os import ...
python 爬虫入门到初步精通罢
理论部分: 一.爬虫使用场景分类通用爬虫: 抓取系统重要组成部分.抓取的是一整张页面数据聚焦爬虫: 是建立在通用爬虫的基础之上.抓取的是特定的局部内容增量式爬虫: 检测网站中数据更新的情况.只会 ...

jade入门与初步使用

jade入门与初步使用相关推荐

最新文章

热门文章