jade安装及基本语法使用

最新推荐文章于 2019-07-26 18:55:00 发布
最新推荐文章于 2019-07-26 18:55:00 发布
阅读量640 收藏 1
点赞数
文章标签： runtime json markdown
原文链接：http://www.cnblogs.com/wenwenwei/p/10017871.html
版权

 

一、cmd安装jade：

cnpm install -g jade
//cnom install jade -g与上面使用效果一致。

二、jade命令行中使用：

使用cmd：

jade index.jade  //编译成--无格式html文件
jade -P index.jade //编译成--有格式的html文件
jade -P -w inde.jade //编译成--有格式且时时监听的html文件

三、jade基本语法格式：

1、jade语法格式
编译前：

doctype html
//【必须严格遵循2个字符缩进】
html
    head
        meta(charset="utf-8")
        title jade
    body
        //style script使用方法
        style.
            h1{color: red;}
        script.
            var a = function(){console.log(1)};
        // # . () ===> id class 属性
        h1#h1.h1(class="h2",title="标题",value="标题",data-src="laal",style="color: red;") 标题
        //“//”注释会出现在编译后的文档中  “//-”不会出现在编译后的文档中
        //第一种多行文本及标签
        p.
            1.aaaaaaa
            2.bbbbbb
            <span>aaa</span>
            a aaa
        //第二种多行文本及标签 “|”
        p
            | 1.aaaa
            | 2.bbbbb
            a(href="#") llalal

编译后：

<!DOCTYPE html>
<!--【必须严格遵循2个字符缩进】-->
<html>
  <head>
    <meta charset="utf-8">
    <title>jade</title>
  </head>
  <body>
    <!--style script使用方法-->
    <style>h1{color: red;}</style>
    <script>var a = function(){console.log(1)};</script>
    <!-- # . () ===> id class 属性-->
    <h1 id="h1" title="标题" value="标题" data-src="laal" style="color: red;" class="h1 h2">标题</h1>
    <!--“//”注释会出现在编译后的文档中  “//-”不会出现在编译后的文档中-->
    <!--第一种多行文本及标签-->
    <p>
      1.aaaaaaa
      2.bbbbbb
      <span>aaa</span>
      a aaa
    </p>
    <!--第二种多行文本及标签 “|”-->
    <p>
      1.aaaa
      2.bbbbb<a href="#">llalal</a>
    </p>
  </body>
</html>

2、ie注释的使用：
编译前：

doctype html
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if IE]><!--<html><!--<![endif]-->
//将“head”标签顶格
meta(charset="utf-8")
head
    title jade
body
</html>

编译后：

<!DOCTYPE html><!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if IE]><!--<html><!--<![endif]-->
<!--将“head”标签顶格-->
<meta charset="utf-8">
<head>
  <title>jade</title>
</head>
<body></body></html>

四、变量的定义与使用

Ⅰ、变量的定义：
1.jade文件中定义：

  - var course = "balabala"

2.命令行定义：

jade index.jade -P -w –obj ‘{“course”: “balabala”}’

3.外部json文件定义：

> {
    "course": "balabala"
>}

需命令行中使用：jade index.jade -P -w -O data.json

Ⅱ、变量的使用

1.使用变量1：

（转义变量字符）
p #{sourse} //可以调用到3种方法定义的sourse变量
（不转义变量字符）
p !{datahtml}
优先级：内部>json; 内部>命令行定义

2.变量使用2：

（转义变量字符）
p= datahtml
（不转义变量字符）
p!= datahtml

3.避免值出现undefined：

input(value=aa) //aa为变量的条用

4.使用变量带方法：

div #{sourse.toUpperCase()}

五、流程语句

jade代码：

doctype html
//【必须严格遵循2个字符缩进】
html
    head
        meta(charset="utf-8")
        title jade
    body
        - var data = {course: "jade",level: "node"}
        //一、for..in循环
        - for(var k in data )
            p= data[k]
        //二、each循环obj
        each value,key in data
            p #{value} #{key}

        - var sections = []
        dl
            //三、嵌套循环
            each section in sections.length > 0? sections : [{id: 0,items: ["none"]}]
                dt= section.id
                each item in section.items
                    dd= item
        //四、while循环
        ul
            - var i = 0
            while i < 4
                li= i++
        //五、if else循环
        - var isTrue = true
        - var arr = ["jade","node"]
        if arr.length > 1
            p= arr.join(" ")
        else
            p= arr[0]

        //六、unless  如果是false就成立
        unless !isTrue
            p= isTrue

        //七、case  类似switch
        - var name = "aa"
        case name
            when "js"
                p js
            when "jade": p jade
            default: p= name

编译成html：

<!DOCTYPE html>
<!--【必须严格遵循2个字符缩进】-->
<html>
  <head>
    <meta charset="utf-8">
    <title>jade</title>
  </head>
  <body>
    <!--一、for..in循环-->
    <p>jade</p>
    <p>node</p>
    <!--二、each循环obj-->
    <p>jade course</p>
    <p>node level</p>
    <dl>
      <!--三、嵌套循环-->
      <dt>0</dt>
      <dd>none</dd>
    </dl>
    <!--四、while循环-->
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <!--五、if else循环-->
    <p>jade node</p>
    <!--六、unless  如果是false就成立-->
    <p>true</p>
    <!--七、case  类似switch-->
    <p>aa</p>
  </body>
</html>

六、mixin的使用

jade文件：

doctype html
html
    meta(charset="utf-8")
    head
        title jade
    body
        //一、mixin 定义模块结构
        //  1.定义模块
        //- *不带参数
        mixin lesson
            p jade mixins
        //- *带参数
        mixin study(name,courses)
            p #{name} study
            ul.courses
                each course incourses
                    li= course
        //- *嵌套定义
        mixin group(student)
            h4= student.name
            +study(student.name,student.courses)
        //  2.mixin的调用
        //      *不带参数调用
        +lesson
        //      *带参数调用
        +study("David",["jade",nodejs])
        //      *嵌套的调用
        +group({name: "David",courses: ["jade","js"]})
        //  3.特性一（属性传递）
        //- 代码块(block为关键字：调用后面是否有代码块)
        mixin team(slogon)
            h4= slogon
            if block
                block
            else
                p no block
        +team("slogon")
            p have team
        //      *传递属性一 (attributes接收属性列表)
        mixin attr(name)
            p(class=attributes.class) #{name}
        +attr("attr")(title="title",class="class")
        //      *传递属性二 (会遍历属性列表并列出来)
        mixin attrs(name)
            p&attributes(attributes)
        +attrs("David")(class="class",id="id",title="title")
        //  4.特性二 （多参数传递）
        mixin magic(name,...items)
            ul(class="#{name}")
                each item in items
                    li= item
        +magic("David","jade","node","...")

编译成html：

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <head>
    <title>jade</title>
  </head>
  <body>
    <!--一、mixin 定义模块结构-->
    <!--  1.定义模块-->
    <!--  2.mixin的调用-->
    <!--        *不带参数调用-->
        <p>jade mixin</p>
    <!--        *带参数调用-->
        <p>David study</p>
        <ul class="courses">
          <li>jade</li>
          <li></li>
        </ul>
    <!--        *嵌套的调用-->
        <h4>David</h4>
            <p>David study</p>
            <ul class="courses">
              <li>jade</li>
              <li>js</li>
            </ul>
    <!--  3.特性一（属性传递）-->
        <h4>slogon</h4>
        <p>have team</p>
    <!--        *传递属性一 (attributes接收属性列表)-->
        <p class="class">attr</p>
    <!--        *传递属性二 (会遍历属性列表并列出来)-->
        <p id="id" title="title" class="class"></p>
    <!--  4.特性二 （多参数传递）-->
        <ul class="David">
          <li>jade</li>
          <li>node</li>
          <li>...</li>
        </ul>
  </body>
</html>

七、继承与包含

1.继承：解决的是子文件和父文件间代码复用问题
*index.jade文件内容：

//- index继承layout文件，相当于引入了layout文件
extends layout


// "desc"在layout文件中也有定义，优先使继承层级低的(index文件中的layout)。
//如果在layout中和“content”中没有调用desc，那么desc是不会被编译
//定义desc
block desc
    p desc from index0
block content
    //  *调用
    block desc

*layout.jade文件：

doctype html
html
    head
        title jade
    body
        block desc
            p desc from layout
        block content

*输出：

<!DOCTYPE html>
<html>
  <head>
    <title>jade</title>
  </head>
  <body>
    <p>desc from index0</p>
    <!--    *调用-->
    <p>desc from index0</p>
  </body>
</html>

*解释：
**index继承了layout文件，最后结果输出2个desc模块：
    *第一个输出：layout文件中的block desc调用，但是为什么输出的不是“desc from larout”，因为优先使用继承层级底的，所以使用的是 index文件中定义的 block desc。
    第二次输出：layout文件中调用 content模块，content模块调用了desc模块，根据继承原则，输出layout中的block desc。*

2.包含：区域块和文件之间的包含问题
*区块和区块
layout.jade文件中的代码：

doctype html
html
    head
        //*使用包含，将head.jade文件包含进来(html)
        include head
        //*style.jade包含进来(css)
        include style
            style.
                div{color: red;}
    body
        //*引入原生的html
        include div.html
        p laall

head.jade文件中的代码：

meta(charset="urf-8")
title jade

*styl.jade文件中的代码：

style.
    p{
        color: #07f;
    }

*div.html文件中的代码：

<p>aaqaaa</p>

编译后的index.html中的代码：

<!DOCTYPE html>
<html>
  <head>
    <!--使用包含，将head.jade文件包含进来(html)-->
    <meta charset="urf-8">
    <title>jade</title>
    <!--style.jade包含进来(css)-->
    <style>
      p{
        color: #07f;
      }
    </style>
    <style>div{color: red;}</style>
  </head>
  <body>
    <!--引入原生的html--><p>aaqaaa</p>
    <p>laall</p>
  </body>
</html>

八、下载jade到本地、API的使用

1.下载jade到本地cmd命令：

cnpm install jade coffee-script less markdown –save
这里写图片描述

2.在node环境下API的使用(必须先下载jade到本地)：

**API：

  • jade.compile(“”,{})
  • jade.render(“”,{})
  • jade.renderFile(“FileUrl”,{},pertty: true)

*新建server.js文件：

var http = require("http");
var jade = require("jade");

http.createServer(function(req,res){
    res.writeHead(200,{
        "Content-Type": "text/html"
    })

    //1.jade.compile
    var fn = jade.compile("div #{course} #{a}",{})
    var html = fn({course: "jade in node",a: "aaaa"})

    // 2.jade.render
    // var html = jade.render("div #{course} #{a}",{course: "jade in node",a: "111"})

    //3.jade.renderFile
    // var html = jade.renderFile("index.jade",{course: "jade in renderFile",pretty: true})

    res.end(html);
}).listen(1337,"127.0.0.1")

console.log("server running")

jade.compile、jade.render、jade.renderFile运行如下：
这里写图片描述
jade.render
这里写图片描述

九、filters过滤器的使用

这里写图片描述

十、runtime.js使用

*新建文件：runtime.jade

div
    h3 jade runtiem call
    p this is from jade pre-compile #{isTrue}

使用命令行编译成js：

jade –client –no-debug runtime.jade
得到runtime.js文件：

function template(locals) {
    var buf = [];
    var jade_mixins = {};
    var jade_interp;
    ;var locals_for_with = (locals || {});(function (isTrue) {
    buf.push("<div><h3>jade runtiem call</h3><p>this is from jade pre-compile " + (jade.escape((jade_interp = isTrue) == null ? '' : jade_interp)) + "</p></div>");}.call(this,"isTrue" in locals_for_with?locals_for_with.isTrue:typeof isTrue!=="undefined"?isTrue:undefined));;return buf.join("");
}

使用：
1.引入runtime的执行环境，引入runtime.js文件。
2.调用template({isTrue:true})函数，可以得到：

div
h3 jade runtiem call
p this is from jade pre-compile true
的html文件。

十一、将html编译成jade模板：

命令行html2jade模块安装：

cnpm install html2jade -g

cdm使用：

html2jade http://www.xxxx.com > xxx.jade

模块中引用：
这里写图片描述

十二、jade优缺点

缺点：
1.不好调试。
2.性能不是很出色。
3.可移植性差。
选择优点：
1.初始阶段。
2.稳定阶段

 

转载于:https://www.cnblogs.com/wenwenwei/p/10017871.html

weixin_30675247
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jade的高级语法
qizidehaijiao的专栏
02-09 274
jade的高级语法原样输出|和.和include js文件|html head script |alert("ddd"); |alert("bbb"); //jade解析之后 &lt;html&gt; &lt;head&gt; &lt;script&gt; alert("ddd"..
Jade基础语法介绍
hsany330的专栏
07-06 1509
Jade是一个基于javascript，可以运行与node与浏览器环境的一个前端模板引擎，而在对它进行学习了解后，作一番简介兼对自我的复习。 项目github主页：https://github.com/jadejs/jade 当然更好的介绍文章就是官方文档了。   tag标签 通过缩进关系，代替以往html的层级包含关系，如一个简单的静态页面可以表达为
jade语法
放羊的小孩
11-01 1225
jade写的网页的demo doctype html html(lang="zh-CN") head meta(charset="UTF-8") title jadeTest body .container .header .menu ...
jade使用语法
zhu2007012205的专栏
03-22 1080
[1] 如果将内容与标记放在不同行,使用"." div#test.            测试内容，我和div在编辑时不在同一行 上面代码等同于 div#test测试内容，我和div在编辑时不在同一行    [2] 取得变量使用 #{定义内容} div 当前日期 #{new Date().getFullYears()}
Node.js 使用jade模板引擎的示例
10-18
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它让 JavaScript 能够在服务器端运行，从而可以构建各种...通过这个示例，读者应该能够掌握在 Node.js 环境中使用 jade 模板引擎来快速开发网站的基本技能。
jade_npp:Jade 的 Notepad++ 语法高亮
06-26
这个项目为 Notepad++ 提供了一个非常简单的用户定义语言文件，它为玉文本做一些基本的语法突出显示。 用法 安装说明（取自 Notepad++ 网站 ）： 将用户定义的语言下载到您的计算机 使用您喜欢的文本编辑器（例如...
vue 使用Jade模板写html,stylus写css的方法
11-30
然而，这需要开发者对Jade的基本语法有一定的了解，以避免可能的错误。对于初学者，可能需要花费一些时间来适应这种新的书写方式。但一旦掌握了，你会发现这种方式对代码的可读性和维护性有很大的帮助。如果你在使用...
node前端模板引擎Jade之标签的基本写法
08-27
Jade使用缩进来区分标签的开始和结束，通常默认为两个空格。如果要在标签中添加内容，只需在标签名后加一个空格，然后输入内容： ```jade h1 This is a title. p This is a paragraph. ``` 编译后得到： `...
基于模板引擎Jade的应用(详解)
08-28
Jade的基本语法包括以下几点： * 使用竖杠（|）表示原样输出的字符 * 使用点（.）表示下一级的所有字符都会被原样输出，不再被识别 * 使用include表示引用外部文件 * 使用短杠（-）表示后面跟着的字符只是一段代码 ...
JADE中文使用手册
03-19
X 射线衍射技术在材料、化工、物理、矿物、地质等学科越来越受到重视，由于 现代 X 射线衍射实验技术的不断完善、数据处理之自动化程度越来越高，受到 研究者的欢迎。
JADE中文教程及笔记 ，详细介绍了JADE的安装配置，重要类的用法，并包含具体例子代码
09-12
JADE 学习笔记 ，详细介绍了JADE的安装配置，重要类的用法，并包含具体例子代码
JADE安装与配置说明
05-14
JADE（Java Agent DEvelopment framework）是基于java语言的开发agent的工作框架。也可以说是用于开发符合FIPA规范的多agent系统的平台。本文详细描述了在windows平台上JADE的安装与配置步骤。
jade的语法逻辑
chongmiao6975的博客
07-21 232
看到一篇写得不错的博客，就情不自禁地想要收藏下来，原文地址：http://www.tuicool.com/articles/bUzQVj2，按照博主的要求转载注明出处 如果你熟悉 Sublime Text 和 Emmet 的组合，那么 Jade 也会是你的菜。 模板引擎 这个术语听起来太过于...
Jade学习（二）之语法规则上
weixin_30779691的博客
07-26 252
⚠️实例均结合node jade缩进代表层级 html <html></html> html <html> head <head> style <style></...
jade入门一
aiolos1111的专栏
06-17 1143
学习Scott老师的jade课程，记录以下笔记，以便以后查看 0、模板引擎模板引擎：将动态数据和静态html页面糅合的一种实现机制或技术1、jade安装与运行jade依赖于nodejs环境进行安装和运行，安装命令如下： ``` npm install -g jade //-g 表示进行全局安装 jade -h //安装完成后，输
jade入门
xuxu_qkz的博客
05-03 2460
jade是html的一种变体写法 doctype html html(lang="en") head title= pageTitle script(type='text/javascript'). if (foo) { bar(1 + 5)
Jade语法文档翻译（zh-cn）及长期使用的总结
CRPER
08-25 3318
Jade模板引擎中文文档在线阅读；及一些技巧的分享
JADE入门教程：多Agent系统编程基础
同时，学习如何使用FIPA-ACL消息格式和语法规则来编写有效的通信脚本也非常重要。 最后，虽然JADE是自由软件，发布在GNU Lesser General Public License (LGPL) v2.1下，但使用和修改它时仍需遵守相应的许可协议。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值