关闭

jade入门与初步使用

标签: jade模板引擎前端开发前端
80人阅读 评论(0) 收藏 举报
分类:

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

加个 " | " 即可















0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:82次
    • 积分:10
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档
    阅读排行
    评论排行