jade入门与初步使用

原创 2017年01月03日 20:00:31

一、认识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效果:

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

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

加个 " | " 即可















相关文章推荐

Node.js开发入门—使用jade模板引擎

jade模板引擎的简介以及学习资源的链接……如何在express里使用jade模板引擎……...
  • foruok
  • foruok
  • 2015年08月11日 07:03
  • 26717

Jade模板引擎入门教学

Jade 模板引擎使用 在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 ...

Node.js模板引擎: Jade入门

Jade是Node.js的一个模板引擎,它借鉴了Haml的很多地方,所以语法上和Haml比较相近。并且,Jade也支持空格。1、标签在Jade里,一行开头的任何文本都被默认解释成HTML标签。并且你只...

JADE入门简介

  • 2012年05月08日 10:36
  • 462KB
  • 下载

Jade初学者入门书

  • 2010年08月22日 09:08
  • 125KB
  • 下载

Jade模板引擎入门教程

功能 Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持。 功能 客户端支持超强的可读性灵活易用的缩进...

jade入门

jade是什么jade是一种模版引擎,省略了很多尖括号。有点像 emmet 插件 按tab期之前的样子安装:npm install jade –global 直接看案例吧doctype html ...

Jade进阶使用

作者:短工邦技术部 - 陈文哲 Jade优点要使用Jade,其实不是那么容易接受的,几个优点我列出来。 1. 熟悉的话,开发确实比较快,适合全栈开发。 2. 强制使用缩进,但比较简洁,也不像ht...

jade5.0使用说明

  • 2013年01月18日 16:59
  • 4.79MB
  • 下载

MDI_Jade_使用手册_第四版.pdf

  • 2014年09月12日 18:26
  • 2.69MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jade入门与初步使用
举报原因:
原因补充:

(最多只允许输入30个字)