一、转义与非转义

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. WebBrowser keystroke

    问题描述:将对话框中的回车消息传递到WebBrowser控件中去. 一开始的解决方案是:通过iwebbrowser2的成员函数get_HWND获取控件的句柄,然后通过SendMessage发送按键消息 ...

  2. 弹性伸缩布局-flex

    弹性伸缩布局-flex 引言:本文主要参照阮一峰的网络日志 .郭锦荣的博客总结完成. 正文: 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性 ...

  3. 通俗语言解释内外网IP与端口映射

    IP:分为外网IP和内网IP 也就是我们说的外网IP属于实体IP 实体IP,它是独一无二的,在网络的世界里,每一部计算机的都有他的位置,一个 IP 就好似一个门牌!例如,你要去百度的网站的话,就要去『 ...

  4. flume 搭建

    Flume使用 1安装及修改初始环境 安装见:http://blog.csdn.net/qianshangding0708/article/details/48088611 配置在conf目录下配置如 ...

  5. [转]linux中颜色的含义

    绿色文件---------- 可执行文件,可执行的程序 红色文件-----------压缩文件或者包文件 蓝色文件----------目录  www.2cto.com     白色文件-------- ...

  6. 项目管理svn

    https://nchc.dl.sourceforge.net/project/tortoisesvn/1.9.6/Application/TortoiseSVN-1.9.6.27867-x64-sv ...

  7. python中字符串中一些函数的用法

    1..capitalize():字符串的首字母大写: 2..count():字符串中的某个字母的个数: 3..center(50,'-'):对象居中,且左右用'-'补齐: 4..encode():吧字 ...

  8. px,em,rem,vw单位在网页和移动端的应用

    px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...

  9. 使用Sidecar将Node.js引入Spring Cloud

    网上看到的一篇文章,觉得写得挺好,现转载于此,以方便需要的网友查阅. 该文章介绍了非JAVA语言提供的应用集成到Spring Cloud的这样一个实现,以便我们使用其他语言作为参考. 感谢原作者分享, ...

  10. 一：webpack 介绍

    webpack介绍: 它是一个给JS准备的打包工具,它可以把很多的模块打包成很少的静态文件,webpack有一个自己的特性就是代码分割(Code Splitting)可以使项目只加载当时需要的文件,  ...