jade 模板使用

npm install jade -g      安装到全局

jade index.jade         导出一个 index.html 压缩后的

jade -P index.jade       导出一个 index.html 没有压缩的

jade -P -w index.jade     -w  对文件实时编译

特殊的div

.container
  
p 巧巧
  
a(href='http://baidu.com', title='巧莉', data-uid='100')
   input(name='course', type='text', value='jade')
   input(name='type', type='checkbox' checked)

长文本写法
   p
  
|
qiaoqiaotongxie
  
|
2.bbc

 

插入标签
  
p.
      a
qiaoqiaojadjade
      1. aa
      2. bb
      <strong>
我就是这么叼</strong>
      3. cc
      4. dd
      5. e
      a qiaoqiaojad

p
     
|
 a
     
a 我是来插入广告的
     
|
 1. aa
     
|
 2. bb
     
|
 3. cc
     
a 我是一个爱捣乱的标签

 

注释和条件注释

单行注释 //

非缓冲注释 //-

块注释

h3 单行注释
// a 巧克力
p 非缓冲注释
//- 你是看不到宝宝我的
h3 块注释
//
   ul
      li
         a
也无风雨也无晴
      li
         a
有花堪折直须折
      li
         a
锦瑟无端五十弦

//-
   ul
      li
         a
也无风雨也无晴
      li
         a
有花堪折直须折
      li
         a
锦瑟无端五十弦
 

IE注释

doctype html
html
  
<!--[if IE 7]><html class='ie7'><! [endif]-->
   <!--[if IE 8]><html class='ie8'><! [endif]-->
   <!--[if IE 9]><html class='ie9'><! [endif]-->
   <!--[if !IE]><!--><html><!--<![endif]-->
 
如果用全注释 html标签在结尾处是要闭合的
 
变量
页面内声明变量
- var course = 'jade'
命令行方式变量
jade index.jade -P -w --obj '{"course":"jade course"}'
命令行方式外部文件
jade index.jade -P -w -O index.json
 
// 网站开发中 通常数据都是从后台程序去调用
转义
#{data}
p= data
非转义
!{data}
p!= data
p \!{htmlData}  输出 !{htmlData}
p \#{htmlData}  输出#{htmlData}
 
没有数值的变量
input(value="#{newData}")
input(value=newData)
 
<input value="undefined">
<input>
 
流程
-var qiao = {course: 'jade',study:'巧莉',age:24}
 
for 语法
-for (var k in qiao)
   p= qiao[k]
 
each 语法
-each value, key in qiao
  
p #{key}: #{value}
 
each value, key in qiao
  
p #{key}: #{value}
 
h3 遍历数组
-var courses = ['node', 'jade', 'express', 'Ejs', 'cheerio', 'bower']
-each value, key in courses
  
p #{key}: #{value}
 
嵌套循环
-var sections = [{id:1,items:['a','b']},{id:2,items:['c','d','e','h']}];
dl
   each
section in sections.length > 0 ? sections : [{id:0, items: ['none']}]
     
dt= section.id
     
each item in section.items
        
dd= item
 
嵌套循环
while循环
-var n = 0
ul
  
while n < 4
      li= n++
 
if else unless 语法
- var show = true
- var lessons = ['jade', 'node'];
if show
  
p 显示
  
if lessons.length > 2
      p #{lessons.join(', ')}
  
else if lessons.length > 1
      p #{lessons.join('/ ')}
  
else
      p no lesson
else
   p no show
unless 反向的判断

unless !show
 
p #{lessons.length}
unless !lessons.length
  
p 逗逼 #{lessons.length}
case 语法
- var name = 'jade'
case name
  
when 'java'
  
when 'node'
     
p Hi node !
  
when 'jade': p Hi jade !
  
when 'express': p Hi express !
  
default
      p Hi #{name}
 
 
mixin的用法
  mixin lesson
     p qiao study jade
  +lesson
  mixin study(name,courses)
     p #{name}
     
ul#courses.courses
        
each course in courses
           
li= course
  +study('巧莉',['jade','node','express','cheerio'])
  +study('苏东坡',['西湖醋鱼', '叫花鸡', '东坡肉'])
 
mixin team(slogon)
   h4 #{slogon}
  
if block
      block
  
else
      p no team
+team('slogon')
   p Good job!
  
p 大逗逼
 
结果
<h4>slogon</h4>
<p>Good job!</p>
<p>大逗逼</p>
 
h2 单个属性值的情况
 
mixin attr(name)
    p(class!=attributes.class) #{name}
 
+attr('attr')(class='magic')
 // != 此处的class是不需要转义的 h2 多个属性值的情况
 
mixin attrs(name)
    p&attributes(attributes) #{name}
 
+attrs('attrs')(class='magic2', id='deep')  h3 参数不定的情况下
 
mixin magic(name, ...items)
    ul(class='#{name}')
       each item in items
          li= item
 
+magic('qiao','逗逼','搞笑的')
 
 
 

jade模板的更多相关文章

  1. Jade 模板引擎使用

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  2. jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  3. 【nodejs】jade模板入门

    使用jetbrians webstom创建空项目 1.创建package.json 引用依赖配置 { "name": "demojade", "des ...

  4. vue 使用Jade模板写html,stylus写css

    vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...

  5. jade模板 注意事项

    1.   jade模板 语法 doctype html html head body header div 2.  添加内容:直接在标签后边加空格 直接写内容 如下: div  我要写的内容 3.  ...

  6. Express框架之Jade模板引擎使用

    日期:2018-7-8  十月梦想  node.js  浏览:2952次  评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...

  7. Jade模板引擎使用详解

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  8. jade——创建第一个jade模板

    什么是jade? jade是node.js的一个模板引擎,参考了haml的语法,是简写的html语言. 使用单个标签代替双标签,类似于Python,通过缩进来确定从属关系,没有结束符号,非常简洁,使用 ...

  9. Jade模板引擎学习(二)语法:代码、变量、循环、过滤器及mixin

    Jade语法 一.代码 不会被缓冲代码 ul - for(var i=0; i; i++) li Jade Engine 会转换为: <ul> <li>Jade Engine& ...

随机推荐

  1. spring mvc controller间跳转 重定向 传参 (转)

    转自:http://zghbwjl.blog.163.com/blog/static/12033667220137795252845/ 1. 需求背景     需求:spring MVC框架contr ...

  2. C++ string

    C++ string best practices => LPTSTR, PSTR, CString, _T, TEXT, Win32 API, Win16. string, wstring. ...

  3. Map<Key,Value>基于Value值排序

    Map<Key,Value> 排序默认是按照KEY值的升序来进行. 针对按照Value来进行排序有两种方法: 第一种 使用TreeMap  代码如下 public class test{ ...

  4. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  5. 如果让你来做HashMap扩容,如何实现在不影响读写的情况下扩容?

    我觉得逼格高,不是体现在问题多刁钻,知识点多深,而是一个非常明确,无歧义的问题,能考察出面试者多方面的能力.这个问题背后:1.了解java中,HashMap的实现:如果一个面试者了解这一点,说明至少他 ...

  6. 一个node项目的框架搭建流程

    项目服务端编程语言node,前端js,数据库mongodb, 开发工具用webstorm. 使用express应用生成器,生成项目雏形. 安装应用生成器工具,命令是npm install expres ...

  7. 《Linux内核设计与实现》CHAPTER17阅读梳理

    <Linux内核设计与实现>CHAPTER17阅读梳理 [学习时间:3.5hours] [学习内容:设备类型,模块,内核对象,sysfs] 个人思考部分见[]标出的部分 一.课堂讲解整理& ...

  8. 关于问题ld:library not found for -lXXX的错误

    我猜想错误引起的原因可能是因为我复制target的时候原来的工程中的的link binary with libraries中原来的libpods-xxx.a没有删除.我将多余的libPods删除后解决 ...

  9. Docker version 1.12.5建立registry私库

    sudo docker run -d -p 5000:5000 -v /opt/data/registry:/var/lib/registry registry :前面的是宿主机的地址(/opt/da ...

  10. 解决UIScrollView把uitableviewcell的点击事件屏蔽

    cell中 [self.contentView addSubview:self.scrollView]; self.scrollView.userInteractionEnabled = NO; [s ...