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

加个 " | " 即可















maven构建hibernate入门使用(1)

1:创建maven工程,引入hibernate需要的依赖 junit junit 3.8.1 test org.hibernate hibernat...
  • u012516914
  • u012516914
  • 2014年12月31日 15:18
  • 1611

从Html到Jade

【学习背景】     经历了一周多的静态页面,对Html也是越来越熟悉。之前不常用的标签也是一个又一个地学着去用。上周接触到新的环境,前台页面从Html转换到了Jade。很好奇,Jade是什么?为什么...
  • u013034223
  • u013034223
  • 2016年05月14日 08:20
  • 1165

Nodejs express使用jade模版

安装express和jade模块 npm install express jade --save var express = require('express'); var app = exp...
  • pretent
  • pretent
  • 2015年05月10日 19:05
  • 1890

【Jade】jade的一些使用技巧

最近在学习使用Node的express框架来搭建一个web网站,其中会涉及到视图渲染方面的东西。这可以借助ejs或者jade这些模板引擎来辅助渲染(模板引擎有很多,使用得最多的、较为完善的就是ejs和...
  • LZGS_4
  • LZGS_4
  • 2015年08月07日 15:45
  • 1996

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

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

Jade的使用教程

转载链接:请标明出处:http://blog.sina.com.cn/s/blog_9e2dfb7401011qir.html 第一部分 物相分析 1.打开您的数据。File—read... 打...
  • yeh201111
  • yeh201111
  • 2013年04月10日 10:30
  • 3802

NodeJS前端开发日记(2)AngularJS+Jade入门实战

之前经过bower下载依赖后,项目结构如下所示: AngularJS+Jade入门2016.9AngularJS2出了,但是关于Javascript的教程还没有补全,鉴于组内的人基本对于typesc...
  • zhxdick
  • zhxdick
  • 2016年10月25日 11:22
  • 2214

jade模板引擎使用中遇到的坑

1.如果id中有变量的话怎么办? 就不要用#后跟id的形式了,改为: div.list-all-live(id='list-' + e.match_id + '-dom') 2.段落中的标签...
  • sinat_29843547
  • sinat_29843547
  • 2016年01月13日 15:53
  • 986

node模版引擎Jade学习笔记

学习教程 带你学习Jade模板引擎 注意事项 如果想直接运行.jade文件,需要全局安装 jade -> npm install jade –save-dev jade index.jade -P -...
  • u011500781
  • u011500781
  • 2016年12月16日 09:09
  • 626

Node.js模板引擎: Jade入门

Jade是Node.js的一个模板引擎,它借鉴了Haml的很多地方,所以语法上和Haml比较相近。并且,Jade也支持空格。1、标签在Jade里,一行开头的任何文本都被默认解释成HTML标签。并且你只...
  • u014695532
  • u014695532
  • 2016年04月05日 15:59
  • 2395
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jade入门与初步使用
举报原因:
原因补充:

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