jade的基本语法

- for (var i=0;i<3;i++)
        li scnu-learn
        //这里的=,默认会转义内容
        p= "Welcome scnu <strong>good</strong> school"
        //如果不想被转义,在=前加!
        p!= "Welcome scnu <strong>good</strong> school"

        //使用变量
        - var name="jade"
        p my name is #{name}
        //如果要输出#{},需要使用\来转义
        p my name is \#{name}
        //变量中的特殊字符会被转义,如果想得到不转义的,使用!代替#
        - var chV="<script></script>"
        p #{chV}
        p !{chV}

        //循环
        //数组实例
        - var jobs=["teacher","student","worker"]
        each val in jobs
            li= val
        //对象实例
        - var student={xuehao:201230,name:‘wangjie‘}
        each val,key in student
            li #{key} : #{val}

        //case
        - var apples = 10
        case apples
            when 0
                p you have no apples
            when 1
                p you have an apples
            default
                p you have #{apples} apples

注释使用

 h3 单行注释
    //h1.title#title index test
    h3 非缓冲注释
    //-div(id=‘div01‘,class=‘div‘)
    h3 块注释
    //-p
        a(href=‘http://www.baidu.com‘,title=‘name‘) link
        input(type=‘text‘,value=‘jie‘)
        input(type=‘checkbox‘,checked)
时间: 2024-08-11 03:36:40

jade的基本语法的相关文章

Sublime Text3 高亮显示Jade语法 (Windows 环境)

首先下载git clone https://github.com/miksago/jade-tmbundle.git Jade 然后打开sublime --> 菜单栏 --> Preferences --> Browse Packages...将下载的包复制进去 然后就能选择Jade 或者  Stylus 语法的高亮了:)

jade模板引擎

jade是使用JavaScript实现,可供nodejs使用的高性能模板引擎(性能高不高,有些争议.姑且称之为高性能吧!).模板引擎有很多,主要使用比较广泛的是jade和ejs,modejs项目默认使用jade作为模板引擎,我也就不多说了至于如何选择,还是得就事论事综合各种因素来考虑.在此不对优缺点进行分析.插一句嘴,ejs的语法更像jsp.asp这样的技术而jade更像python的语法风格,缩进来缩进去,有点绕.不过这并不影响代码的可读性(我是这么认为的).不管是jade还是ejs语法都比较

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

vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的步骤和提高了效率. 安装包 // 安装jade包 npm install jade jade-loader --save-dev // 如果使用vue-cli构建项目,则不需要安装stylus相关的包,vue-cli默认已安装 npm install stylus stylus-loader --s

nodejs学习(二) ---- express中使用模板引擎jade

系列教程,上一节教程  express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.jade 和 footer.jade,下面教程会一步步创建) 页面解析出的样子如下图.完全是html标签 一.jade 模板引擎 介绍 模板引擎是一个库,或者一个使用一定的规则或者语言来解释数据并渲染视图的框架.模板引擎处理过的最终结果是一个视图页面,也就是html页面或者用户图形界面GUI.在MVC

Angular入门

Angular入门 这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似,但其实Angular定义是MVW框架,W代表(what ever works for you).意味着它可以是控制器或者视图模型,或者服务,就看你怎么定义的.这一节会介绍基本的Angular知识:然后改造我们之前做的页面:并且调用之前的定义的api来获取数据. Angular的

Nodejs之MEAN栈开发(五)-- Angular入门与页面改造

这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似,但其实Angular定义是MVW框架,W代表(what ever works for you).意味着它可以是控制器或者视图模型,或者服务,就看你怎么定义的.这一节会介绍基本的Angular知识:然后改造我们之前做的页面:并且调用之前的定义的api来获取数据. Angular的数据绑定是指视图的改

node.js(express)连接mongoDB入门指导

一.写在前面 人人都想成为全栈码农,作为一个web前端开发人员,通往全栈的简洁之路,貌似就是node.js了.前段时间学习了node.js,来谈谈新手如何快速的搭建自己的web服务,开启全栈之路. 二.安装node.js 接触过后端开发的人都知道,首先要安装服务.作为新手,肯定是选择最简单的可视化安装了(傻瓜式下一步,其它的方式等熟悉相关操作后自然就会了的),通过官网http://nodejs.org/dist/v0.6.1/node-v0.6.1.msi 下载电脑适配的安装包(这个是windo

VS Code 快捷键

转自:https://www.cnblogs.com/weihe-xunwu/p/6687000.html VS Code 的常用快捷键和插件 一.vs code 的常用快捷键 1.注释: a) 单行注释:[ctrl+k,ctrl+c] 或 ctrl+/ b) 取消单行注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u) c) 多行注释:[alt+shift+A] d) 多行注释:/** 2.移动行:alt+up/down 3.显示/隐藏左侧目录栏 ctrl + b 4.复

VS Code 的常用快捷键和插件

一.vs code 的常用快捷键 1.注释: a) 单行注释:[ctrl+k,ctrl+c] 或 ctrl+/ b) 取消单行注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u) c) 多行注释:[alt+shift+A] d) 多行注释:/** 2.移动行:alt+up/down 3.显示/隐藏左侧目录栏  ctrl + b 4.复制当前行:shift + alt +up/down 5.删除当前行:shift + ctrl + k 6.控制台终端显示与隐藏:ctrl +