一、转义与非转义

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. JMeter请求执行次数设置

    今天介绍下JMeter如何控制请求执行次数 主要有两种方式: 方式一:通过循环控制器控制每个请求的执行次数 例如:脚本执行规律是这样的,login-->customerPage-->sea ...

  2. js的点表示法和方括号表示法

    最近发现了一个很好玩的js特性,就是任何可以用点表示法的语句,都可以同样用方括号表示法表示出来,就例如一下语句,三句都是可以实现的: document.body.innerHTML="tes ...

  3. 神经网络与深度学习笔记 Chapter 6之卷积神经网络

    深度学习 Introducing convolutional networks:卷积神经网络介绍 卷积神经网络中有三个基本的概念:局部感受野(local receptive fields), 共享权重 ...

  4. thinkphp 中英文网站详解

    thinkphp 制作中英文网站的两种方法 一,在网站程序里增加语言脚本,设置整站自动翻译. 二,在原有的页面制作新的模板,在新的页面编辑网站, 优缺点: 一:优点.........就是不用多次添加内 ...

  5. jenkins 邮件添加附件

    背景 当CI执行失败的时候,想获取到失败的用例,然后在本地调试,testNG是自带一个testng-failed.xml来记录的: 想法:尝试使用git 来push这个文件到远程仓库,然后本地pull ...

  6. testNG java.net.SocketException: Software caused connection abort: socket write error

    执行用例报错,提示 java.net.SocketException: Software caused connection abort: socket write error java.net.So ...

  7. TensorFlow框架(2)之TensorBoard详解

    为了更方便 TensorFlow 程序的理解.调试与优化,TensorFlow发布了一套叫做 TensorBoard 的可视化工具.你可以用 TensorBoard 来展现你的 TensorFlow ...

  8. Android 开发者，如何提升自己的职场竞争力？

    前言 该文章是笔者参加 Android 巴士线下交流会成都站 的手写讲稿虚拟场景,所以大家将就看一下. 开始 大家好,我是刘世麟,首先感谢安卓巴士为我们创造了这次奇妙的相遇.现场的氛围也让我十分激动. ...

  9. 浅谈CSS模块化

    为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...

  10. mysql简单主从复制（一）

    MYSQL简单主从复制 master:172.25.44.1 slave:172.25.44.2 mysql5.7安装 master和slave均操作 准备rpm包:mysql-5.7.17-1.el ...