jade安装及基本语法使用

最新推荐文章于 2019-11-19 15:40:07 发布

David-wenwen

最新推荐文章于 2019-11-19 15:40:07 发布

阅读量3.6k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weiwenwen6/article/details/77869738

版权

本文详细介绍了jade的安装过程，包括cmd安装和命令行使用，并讲解了其基本语法，如变量定义与使用、流程语句、mixin、继承与包含等特性。此外，还涵盖了filters过滤器、runtime.js的使用以及如何将html转换为jade模板。文章最后总结了jade的优缺点。

摘要由CSDN通过智能技术生成

一、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”标签顶格-->