一、转义与非转义

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. 安卓开发中SQLite的使用（附实例）

    在Android平台上系统内置了丰富的API来供开发人员操作SQLite,我们可以轻松的完成对数据的存取.下面以我自己创建的收入信息表(InAccount)为例,来学习SQLite的使用. 主要是四个 ...

  2. Python正则匹配

    使用Re模块 首先生成一个匹配模式pattern,如pattern='.test' 然后使用re.match(pattern,str)或者search()匹配调用 match跟search的区别: m ...

  3. JMeter元件的作用域和执行顺序

    元件的作用域 配置元件:会影响其作用范围内的所有元件,作用范围是最大的,只要创建就对所有元件起作用. 前置处理器:在其作用范围内的每一个Sample元件之前执行: 定时器:对其作用范围内的每一个Sam ...

  4. SQL查询四舍五入 解决方法

    方法1: SELECT CAST('123.456' as decimal) 将会得到 123(小数点后面的将会被省略掉). 如果希望得到小数点后面的两位. 则需要把上面的改为 SELECT CAST ...

  5. Swift语言中与C/C++和Java不同的语法（五）

    这一节将会提到Swift中其他的关于函数的应用,这些内容包括有: 默认参数值和可变参数值.常量参数.返回函数类型和函数嵌套: 一.默认参数值和可变参数值 对默认参数值是指在函数的声明中就已经定义了参数 ...

  6. 【Java学习笔记之二十九】Java中的"equals"和"=="的用法及区别

    Java中的"equals"和"=="的用法及区别 在初学Java时,可能会经常碰到下面的代码: String str1 = new String(" ...

  7. LESS文档

    less官方介绍文档(http://lesscss.org/#docs) Getting Started Less is a CSS pre-processor, meaning that it ex ...

  8. javascript学习笔记-2：jQuery中$("xx")返回值探究

    最近在写一个jQuery插件的时候,需要用到一个条件: 一组img标签,每一个元素都需要被它前面的元素值src替换,如果是第一个(序列为0)则其值为最后一个元素值,如果是最后一个,那么其值为第一个元素 ...

  9. 配置HAProxy支持https协议

    author:JevonWei 版权声明:原创作品 实现http重定向到https HAProxy 创建CA证书 [root@HAProxy ~]# cd /etc/haproxy/ [root@HA ...

  10. 关于querySelector 和 document.getElementsByTagName 选中集合问题

    本文解决的问题是 :运用for..of..循环时,edge浏览器报Object doesn't support property or method 'symbol.iterator'问题 以及 符号 ...