1.   jade模板 语法

doctype html
html
head
body
header
div

  

2.  添加内容:直接在标签后边加空格 直接写内容

  如下:

    div  我要写的内容

3.  直接在body内添加内容:body 后边添加  "."     或者 直接 “|内容”

   "."可以替换 多行  "|"

    |

    |

    |

html
head
body.
asdas
     errdtt
     dgdtrg

 

html
head
body
|asdas
|tryr
|rtytyry

  

4. 变量: “ #{a} ”  或者代码中 “=a”

  

doctype html
html
head
body
header
div
-var a="kevin"
div 我的名字叫#{a}

  

doctype html
html
head
body
header
div
-var arr = ["sdfsf","dfddf","cdfsf"]
-for(var i=0;i<arr.length;i++)
div=arr[i]

  

  

Note:    这里注意 里边有“;”时,上述代码 for 前边的 "— "不能省掉 ; 而下边代码的 if 前边的 "—" 可以省掉

doctype html
html
head
body
header
div
-var a=6;
if(a==6)
div=a
else
div skdjhfsk

Note: 使用 "!="   不转义代码 ,识别变量中的 标签

doctype html
html
head
body
-var a = "<h3>山东富士康</h3>书店合肥收到"
div!=a

5. switch 特殊处理

html
head
body
-var a=4
case a
when 4
div 5
when 3
div 3
default
不对

 6.属性 (class="box clearfix",src="./a.jpg")

html
head
body
div(class="box clearfix",data-id="item1")

  Note 特例 style class ,json和数组表示

  

html
head
body
div(class=["box","clearfix"],style={width:"100px",height:"100px",background:"pink"},data-id="item1")

  

html
head
body
-var arr = ["box","clearfix"];
-var json = {width:"100px",height:"100px",background:"pink"};
div(class=arr,style=json,data-id="item1")

  

html
head
body
-var arr = ["box","clearfix"];
-var json = {width:"100px",height:"100px",background:"pink"};
div(class=arr, class="active",style=json,data-id="item1")

  

7.渲染

var str =  jade.renderFile('1.jade',{"pretty":true,name:"kevin"});

fs.writeFile("./a.html",str,function(err){})

jade模板 注意事项的更多相关文章

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

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

  2. Jade 模板引擎使用

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

  3. jade模板

    jade 模板使用 npm install jade -g      安装到全局 jade index.jade         导出一个 index.html 压缩后的 jade -P index. ...

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

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

  5. 【nodejs】jade模板入门

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

  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. Linux(Ubuntu)使用日记------tenserflow安装(pip安装法)

    其实步骤是很简单的,只是一开始在网上找了一份错误的教程的原因,掉入了坑. 安装过程: 1. 检查pip版本 pip3 -V 要求使用最新版的pip 9.0.1,如果不是,按照下面的方法安装最新的pip ...

  2. Linux--虚拟环境

    一 . 虚拟环境的安装 如果我们在进行多个django项目的话,只用一个物理环境的话,那么会影响效率,这时候我们局可以应用虚拟环境了 virtualenv #指定清华源下载pip的包 pip3 ins ...

  3. Window下搭建X5本地应用打包服务器

    总的来说就是安装虚拟机,装载VM文件 X5打包服务器(App-Builder)是通过服务方式把X5开发工具(Studio)创建的本地应用进行打包和数字签名,开发者不用单独构建原生代码的编译环境,方便开 ...

  4. monkey日志管理

    日志管理作用 Monkey日志管理是Monkey测试中非常重要的一个环节,通过日志管理分析,可以获取当前测试对象在测试过程中是否会发生异常,以及发生的概率,同时还可以获取对应的错误信息,帮助开发定位和 ...

  5. CSS代码检查工具stylelint

    前面的话 CSS不能算是严格意义的编程语言,但是在前端体系中却不能小觑. CSS 是以描述为主的样式表,如果描述得混乱.没有规则,对于其他开发者一定是一个定时炸弹,特别是有强迫症的人群.CSS 看似简 ...

  6. Qt 自定义按钮

    自定义控件的实现思路如下: a1.新建一个类,该类继承QPushbutton,由于QPushbutton继承于QWidget,因此可以直接在该继承类里面进行布局管理和挂载控件: a2.新建两个QLab ...

  7. BSGS及扩展BSGS算法及例题

    \(BSGS(baby-step-giant-step)\)算法是用来解高次同余方程的最小非负整数解的算法,即形如这个的方程: \(a^x\equiv b(mod\ p)\) 其中\(p\)为质数(其 ...

  8. 1: jsp的4个作用域 pageScope、requestScope、sessionScope、applicationScope的区别

    1.区别: 1.page指当前页面有效.在一个jsp页面里有效 2.request 指在一次请求的全过程中有效,即从http请求到服务器处理结束,返回响应的整个过程,存放在HttpServletReq ...

  9. 解决js复制在安卓和ios兼容问题

    var clipboard = new ClipboardJS('.fr', { // target: function() { // return document.querySelector('d ...

  10. .pyc是个什么 python的执行过程

    1. Python是一门解释型语言? 我初学Python时,听到的关于Python的第一句话就是,Python是一门解释性语言,我就这样一直相信下去,直到发现了*.pyc文件的存在.如果是解释型语言, ...