jade是一个比ejs略难得模板。express的默认模本就是jade。 今天看了一下其实不是太难~~

笔记:

    jade中使用缩进来定义HTML文档的层次结构
jade不需要关闭标签
给div添加id需要用# / 类的话用.
使用|可以连接大段文本主题。会将他们视作一起的内容
`-`开头可以定义一个变量 `=`可以赋值
`- var name='aa'`
`p #{name}`这样就可以使用这个变量了
数组操作:
- arrs = ['haha','hah2','jade']
- each s in arrs
p=s
这样就给每个p里面插入了arrs里面的每个值
对象操作:
- obj = {name:'jake',job:"postman"}
- each val,key in obj
li #{val} :#{key}
条件判断
- locked = false
- if(locked)
p 开锁了
- else
p 锁住了
添加内联脚本:
script
alert('这是jade内联js');
包含 :
include
mixin:
重复使用代码块
mixin users(users)
ul
each user in users
li=user - list = ['liebiao1','liebiao2','LIBIAO3'];
mixin users(list)
- list2= ['liebiao1','liebiao2','LIBIAO3'];
mixin users(list2)

jade初学的更多相关文章

  1. nodejs初学————安装篇(iis8.5+windows8.1)

    nodejs很久前就想玩玩,不过一直没时间,昨晚花了4个小时来捣鼓到iis上架设成功了,废话不说了. PS:我的系统是windows8.1 x64,所以自带iis8.5的,下载的文件也是x64的. N ...

  2. Jade学习笔记

    初学nodejs,折腾过用handlebars做模板,后来隔了一段重新学习,用了jade,真心简洁……记录一些学习笔记,以备复习. jade是基于缩进的,所以tab与space不能混用: 属性的设置: ...

  3. Jade模板引擎让你飞

    写在前面:现在jade改名成pug了 一.安装 npm install jade 二.基本使用 1.简单使用 p hello jade! 渲染后: <p>hello jade!</p ...

  4. DDD初学指南

    去年就打算总结一下,结果新换的工作特别忙,就迟迟没有认真动手.主要内容是很多初学DDD甚至于学习很长时间的同学没有弄明白DDD是什么,适合什么情况.这世界上没有银弹,抛开了适合的场景孤立的去研究DDD ...

  5. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  6. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  7. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  8. Vue ES6 Jade Scss Webpack Gulp

    一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:"首先是为人写程序,其次才是机器(Write Programs ...

  9. 初学Vue2.0--基础篇

    概述: 鉴于本人初学,使用的编译器是webStorm,需添加对VUE的支持,添加方法可以参考 http://www.jianshu.com/p/142dae4f8b51. 起步: 1. 扎实的 Jav ...

随机推荐

  1. [原创]linux简单之美(二)

    原文链接:linux简单之美(二) 我们在前一章中看到了如何仅仅用syscall做一些简单的事,现在我们看能不能直接调用C标准库中的函数快速做一些"复杂"的事: section . ...

  2. Xamarin生成的APK大小分析

    原文:Xamarin生成的APK大小分析 刚接触Xamarin都会被Xamarin的售价吓一跳,另外就是它生成的APK大小,官方也有相关的说明,这里加上自己的理解同意讲解下: 以下是针对Android ...

  3. [Leetcode][Python]30: Substring with Concatenation of All Words

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 30: Substring with Concatenation of All ...

  4. ntpd和ntpdate的区别

    之前配置ntpd的时候搜到一句话,印象很深刻,也觉得很有标题党的效果,就借鉴为标题了:“我认为有几种人是必须不招聘/裁掉的: 1 用ntpdate代替ntpd的人”但具体原因不太懂,总觉得还是用ntp ...

  5. IOS深入学习(3)之Control Object

    1 前言 今天我们来简单的学习一下IOS中用户点击屏幕后的事件处理,其中主要介绍一下Control Object,内容如下. 2 详述 Control是处于当用户用某种方式操作进行发送消息给另一个界面 ...

  6. html中文乱码

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">改成<m ...

  7. linux重新编译内核

    一.linux内核 1.查看linux内核版本 uname -r 2.下载对应的linux内核 https://www.kernel.org/pub/linux/kernel/ 将内核文件夹解压到/u ...

  8. switch case default 的使用

    switch_case从页面输入五个同学的成绩,求出平均成绩,如果大于等于90为优秀,小于90大于等于80为良好,小于80大于等于70为一般,小于70大于等于60为较差,小于60为很差 SWITCH语 ...

  9. HTML系列(五):超链接

    <a> 标签定义超链接,最重要的属性是 href 属性,它指示链接的目标.通过将href属性设定不同类型的值可以使链接指向不同类型的链接地址:内部链接.外部链接.锚链接. 内部链接指的是同 ...

  10. Web数据库的UI框架 Evolutility

    Evolutility 这个框架通过一个XML文件的定义,能够为一个数据对象(数据库中的一张表)来自动生成List,View,Edit,Delete,Search,Advance Search等视图, ...