jade基础文档总结

1.安装jade：npm install jade -g

运行jade：jade index.jade

如果要实时观察变化，可以运行：jade -P -w index.jade

用编译软件分屏（例：sublime）观察

2.学习jade

中午看了一下文档，学习了一下，直接代码列出来：

index.jade

<!-- 缓冲区注释 -->
doctype html
html(lang="zh-CN")headtitlebodydiv.demo1//非缓冲区注释div//注意空格a(href="http://www.baidu.com",target="_blank") 百度//“=”设置元素包含的内容。“=”后可跟任何“表达式”，可以是一个字符串、一个“变量”，也可以是“函数”或“表达式”的运算结果。“=”后的内容会被转码div='包含内容'+',<b>表达式</b>'//不希望进行转码div!='包含内用，<b>表达式</b>'//布尔属性button(disabled=true) 属性进行添加button(disabled=false) 属性不进行添加//style写法div(style={color:red,padding:'10px 10px'}) 文本内容div.img//标签自闭和属性（img，input等）img(src="/images/img1.jpg")//jade的特殊字符“|”将后边的内容原样输出//注意：“|”作用域只有一行，多行用到“.”div.demo2a(href="http://www.baidu.com") 百度| 这是百度的网址div.插入的jade语句是：#[b 这个]//嵌入JavaScript代码（提高便利性，灵活性）//“-”开头-for(var i=0;i<=2;i++)p 这是一个p//遍历语法-var arry=['one','two','three']each item,index in arrydiv=index+':'+item//while语法- var n=0;while n<=3div= n++//if-var a=false,b=trueif adiv 1elsediv 你猜//case-var gen=0case genwhen 0div 是0defaultdiv 不是0//填充数据-var name='zx'div my name is #{name} <!--转码 -->div my name is !{name}<!--不转码 -->//继承（关键字block替换的块）

编译以后：

<!-- 缓冲区注释 --><!DOCTYPE html>
<html lang="zh-CN"><head><title></title></head><body><div class="demo1"></div><!--非缓冲区注释--><div><!--注意空格--><a href="http://www.baidu.com" target="_blank">百度</a></div><!--“=”设置元素包含的内容。“=”后可跟任何“表达式”，可以是一个字符串、一个“变量”，也可以是“函数”或“表达式”的运算结果。“=”后的内容会被转码--><div>包含内容,&lt;b&gt;表达式&lt;/b&gt;</div><!--不希望进行转码--><div>包含内用，<b>表达式</b></div><!--布尔属性--><button disabled>属性进行添加</button><button>属性不进行添加</button><!--style写法--><div style="color:undefined;padding:10px 10px">文本内容</div><div class="img"><!--标签自闭和属性（img，input等）--><img src="/images/img1.jpg"></div><!--jade的特殊字符“|”将后边的内容原样输出--><!--注意：“|”作用域只有一行，多行用到“.”--><div class="demo2"><a href="http://www.baidu.com">百度</a>这是百度的网址</div><div>插入的jade语句是：<b>这个</b></div><!--嵌入JavaScript代码（提高便利性，灵活性）--><!--“-”开头--><p>这是一个p</p><p>这是一个p</p><p>这是一个p</p><!--遍历语法--><div>0:one</div><div>1:two</div><div>2:three</div><!--while语法--><div>0</div><div>1</div><div>2</div><div>3</div><!--if--><div>你猜</div><!--case--><div>是0</div><!--填充数据--><div>my name is zx <!--转码 --></div><div>my name is zx<!--不转码 --></div><!--继承（关键字block替换的块）--></body>
</html>

jade基础文档总结相关推荐

jQuery基础文档(持续更新)
文章目录 jQuery基础文档(持续更新) 1 jQuery入门仪式: jQuery基础文档(持续更新) 1 jQuery入门仪式: 还是先上一段代码吧,对照这看: <!DOCTYPE html ...
Java基础了解-12-网络编程/发送邮件/多线程编程/Applet 基础/文档注释
@ 网络编程/发送邮件/多线程编程/Applet 基础/文档注释一.Java 网络编程网络编程是指编写运行在多个设备(计算机)的程序,这些设备都通过网络连接起来. java.net 包中 J2SE ...
计算机网络基础文档,计算机网络基础-20210608152532.pdf-原创力文档
计算机网络基础课程教案讲次第 20 讲授课班级 07 计算机班授课时数 2 教材名称最新计算机网络培训教程出版单位汕头大学出版社授课方式理论课□ 讨论课□ √ 实验课□ √ 习题课 ...
css无效 https_【CSS非全解02】CSS基础-文档流
基本概念文档流 mdn 块.内联.内联块? margin合并两种盒模型文档流 Normal Flow 流式布局 mdn 文档流动方向从左到右:"https://developer.m ...
Java基础文档,图文并茂+代码实例
写在前面: 本文为本人在期末复习时临时撰写的java复习文档,其中引用的他人内容均已添加链接.吐血整理数万字+数十张图片+示例代码,希望本文能对你有所帮助. 1.java概述一次编程,到处运行 .j ...
饥荒MOD制作基础文档
对于饥荒mod制作这一块来说我也是刚刚懂得全部流程并发布了自己的第一个作品首先 mod包含了:动画文件.图片资源文件.脚本文件制作mod就是对这几块东西进行编辑然后会需要用到一些工具还有一些 ...
计算机文化基础证书丢了,计算机文化基础文档的打印与保护 3.8.1 防止文档内容丢失.pptx...
主讲人:张玉英字处理软件Word2010 第三章 1 3.1 Office2010概述 2 3.2 使用Office2010应用程序 3 3.3 Word2010概述 4 3.4 Word2010的 ...
jq基础文档手册3.0
插入 1append() 向每个匹配的元素内部追加元素 2appendTo() 将所有匹配元素追加到另一个元素集合中 3prepend()向每个匹配元素的内部前置内容 4prependTo() 把所有 ...
计算机基础文档应用主题效果,计算机应用基础总结.docx
计算机应用基础总结计算机应用基础总结 201*年下期<计算机应用基础>课教学总结新田县职业中专唐丹这学期,我授课的科目是高等教育社出版的<计算机应用基础>,班级是家电2 ...

jade基础文档总结

jade基础文档总结相关推荐

最新文章

热门文章