一、转义与非转义

jade模板文件代码：

 doctype html

 html

     head

         meta(charset='utf-8')

         title jade学习-by ghostwu

     body

         h3  转义与非转义

         - var userName = 'ghostwu'

         - var str = '<script>alert("ghostwu");</script>'

         div #{userName}

         div #{str}

         div !{str}

         div= userName

         div= str

         div!= str

         div \#{userName}

         div \!{str}

         div(data-innerHTML=age)

         div(data-innerHTML='#{age}')

         div(data-innerHTML='#{userName}')

编译之后的效果：

解释：

#{} : 带有转义效果的输出

!{}: 不转义输出

= : 与#{}效果相同

!= : 与!{}效果相同

\#{}：原样输出#{}

属性后面跟#{age}，会把变量解释出来，如果这个变量没有定义，就会输出undefined。在实际情况中，如果没有定义的变量就不要输出，我们可以直接这样做 属性=变量名，他会自动判断该变量是否设置，决定是否输出变量的值或者不要输出属性，如 div(data-innerHTML=userName)  userName我们设置了，所以会编译输出<div data-innerHTML="ghostwu"></div>

二、流程控制（循环） 

jade文件代码：

 doctype html

 html

     head

         meta(charset='utf-8')

         title jade学习-by ghostwu

     body

         h3 流程控制(for...in)

         - var userInfo = { userName : 'ghostwu', age : 22 };

         ul 用户信息

             - for ( var key in userInfo )

                 li= userInfo[key]

         h3 流程控制(for...each语法糖)

         ul 用户信息

             - each val, key in userInfo

                 li #{key}->#{val}

         h3 for..each遍历数组

         - var skills = ['php','linux','javascript','node.js'];

         ul 技能

             - each item in skills

                 li #{item}

         h3 嵌套for...each循环

         -

             var userList = [

                 {

                     user : 'ghostwu',

                     skill : ['javascript','node.js','linux']

                 },

                 {

                     user : '八戒',

                     skill : ['吹牛b', '泡妞']

                 }

             ];

         ul 用户信息

             - each val, key in userList

                 li #{userList[key]['user']}

                     ul 该用户技能

                         - each v, k in userList[key]['skill']

                             li #{v}

编译之后的结果：

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>jade学习-by ghostwu</title>

   </head>

   <body>

     <h3>流程控制(for...in)</h3>

     <ul>用户信息

       <li>ghostwu</li>

       <li>22</li>

     </ul>

     <h3>流程控制(for...each语法糖)</h3>

     <ul>用户信息

       <li>userName->ghostwu</li>

       <li>age->22</li>

     </ul>

     <h3>for..each遍历数组</h3>

     <ul>技能

       <li>php</li>

       <li>linux</li>

       <li>javascript</li>

       <li>node.js</li>

     </ul>

     <h3>嵌套for...each循环</h3>

     <ul>用户信息

       <li>ghostwu

         <ul>该用户技能

           <li>javascript</li>

           <li>node.js</li>

           <li>linux</li>

         </ul>

       </li>

       <li>八戒

         <ul>该用户技能

           <li>吹牛b</li>

           <li>泡妞</li>

         </ul>

       </li>

     </ul>

   </body>

 </html>

循环的语法跟原生js差不多，each这里的val, key是当前数组的值和键.

三、条件判断语句

编译之后的结果:

if.else很好理解，跟原生js一样

unless: 给定条件是否不符合要求，如果不符合，就执行下一步.

switch...case语句在jade中的写法

 doctype html

 html

     head

         meta(charset='utf-8')

         title jade学习-by ghostwu

     body

         h3 条件语句

         - var skill = 'linux';

         case skill

             when php

                 p 你会php

             when java

                 p 你会java

             when linux

                 p 你会linux

             default

                 p #{skill}

编译之后：

[js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义的更多相关文章

  1. [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用

    一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...

  2. [js高手之路]Node.js模板引擎教程-jade速学与实战1

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  3. [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  4. [js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin

    强大的mixin mixin类似于函数的功能,可以达到模块复用的效果 mixin show: 定义一个类似函数的功能,名字叫show,里面的就是他的内容 +show: 调用show,每调用一次执行一次 ...

  5. [js高手之路]Node.js+jade抓取博客所有文章生成静态html文件

    这个周末,恶补了一下jade模板引擎,就为生成静态html文件,这篇文章需要知道jade以及看过我的上篇文章,我先给出他们的参考链接: [js高手之路]Node.js模板引擎教程-jade速学与实战1 ...

  6. [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)

    该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路] ...

  7. [js高手之路]Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件

    接着这篇文章[js高手之路]Node.js+jade抓取博客所有文章生成静态html文件继续,在这篇文章中实现了采集与静态文件的生成,在实际的采集项目中, 应该是先入库再选择性的生成静态文件.那么我选 ...

  8. [js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist

    promise主要是用来解决异步回调问题,其实还有好几种比promise更好的方案,后面再说,这节,我们先用promise来改造下,我以前写的一篇文章[js高手之路]javascript腾讯面试题学习 ...

  9. [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...

随机推荐

  1. java之生成可重复执行的sql脚本

    在实际项目开发过程中,sql脚本需要多次执行.而一般的DML和DDL语句一般只能执行一次,再次执行执行时就会报错(操作对应已存在/不存在),所以必须将sql脚本生成可重复执行的.本文共分为4部分:1. ...

  2. go环境的安装~

    Golang环境搭建 Golang github地址:https://github.com/golang/go Golang的环境下载:https://golang.org/dl/ 安装过程就是nex ...

  3. DesiredCapabilities参数配置及含义

    一.DesiredCapabilities的作用: 负责启动服务端时的参数设置,启动session的时候是必须提供的. Desired Capabilities本质上是key value的对象,它告诉 ...

  4. 老司机和你深聊 Kubenertes 资源分配之 Request 和 Limit 解析

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯云容器服务团队 Kubernetes是一个容器集群管理平台,Kubernetes需要统计整体平台的资源使用情况,合理地将资源分配 ...

  5. 7.28.2 static关键字（静态和成员）

    成员是对象级别的,访问成员必须用"引用.",如果用"类名."访问会报错!如果用空引用访问成员则会发生控空指针异常! 静态是类级别的,访问静态必须用类" ...

  6. 《Java从入门到放弃》JavaSE篇：综合练习——单身狗租赁系统(数组版)

    因为现在只学习了基本语法,所以在综合练习之前,先补充关于方法概念. 方法的作用:把一系列的代码放在一起,然后再取个别名.之后通过这个别名的调用,就相当于执行了这一系列的代码. 方法的语法:([]中的内 ...

  7. 虚拟机搭建hadoop环境

    这里简单用三台虚拟机,搭建了一个两个数据节点的hadoop机群,仅供新人学习.零零碎碎,花了大概一天时间,总算完成了. 环境 Linux版本:CentOS 6.5 VMware虚拟机 jdk1.6.0 ...

  8. Apache与Tomcat的关系和区别 -个人比较

    我们经常在用apache和tomcat等这些服务器,可是总感觉还是不清楚他们之间有什么关系,在用tomcat的时候总出现apache,总感到迷惑,到底谁是主谁是次,因此特意在网上查询了一些这方面的资料 ...

  9. pycharm中的快捷键和简单设置

    PyCharm3.x默认快捷键 PyCharm Default Keymap 1.编辑(Editing) Ctrl + Space    基本的代码完成(类.方法.属性)Ctrl + Alt + Sp ...

  10. [知了堂学习笔记]_JSON数据操作第2讲(JSON的封装与解析)

    上一讲为大家讲了什么是JSON,那么这一讲为大家带来了在WEB项目中JSON的用法,也就是JSON的封装与解析. 此图是数据库中的部分内容 一.JSON封装 所谓的JSON封装,指的是在Servlet ...