基于Node.js模板引擎教程-jade速学与实战1


Posted in Javascript onSeptember 17, 2017

环境准备:

全局安装jade: npm install jade -g

初始化项目package.json: npm init --yes

安装完成之后,可以使用 jade --help 查看jade的命令行用法

一、在项目目录下新建index.jade文件

inde.jade代码:

doctype html
html
  head
    meta(charset='utf-8')
    title
  body
    h3 欢迎学习jade

1,标签按照html的缩进格式写

2,标签的属性可以采用圆括号

3,如果标签有内容,可以直接写在标签的后面

然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件,-P( 把代码整理成缩进格式的,如果不带这个参数,index.html就是压缩格式,不利于阅读)

编译之后的index.html代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <h3>欢迎学习jade</h3>
 </body>
</html>

二、class,id等其他属性与多行文本的书写

新建index2.jade文件,代码如下:

doctype html
html
  head
    meta(charset='utf8')
    title jade template engine
  body
    h1 jade template engine
    h1 jade template engine
    h1 jade template engine
    h1 jade template engine
    div#box.box1.box2(class='box3')
    #abc.box1.box2.box3
    h3.box1.box2(class='abc def')
    a(href='http://www.taobao.com',
    target = 'blank') 淘宝
    input(type='button', value='点我')
    br
    p.
      1,this is
      <strong>hello</strong>
      2,test
      3,string
    p
      |  1, this is
      strong hello
      |  2, test
      |  3, test string

执行编译命令:jade -P <index2.jade> ghostwu.html 把index2.jade编译成ghostwu.html文件,编译之后的代码如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade template engine</title>
 </head>
 <body>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <div id="box" class="box1 box2 box3"></div>
  <div id="abc" class="box1 box2 box3"></div>
  <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" rel="external nofollow" target="blank">淘宝</a>
  <input type="button" value="点我"><br>
  <p>
   1,this is
   <strong>hello</strong>
   2,test
   3,string
  </p>
  <p> 1, this is<strong>hello</strong> 2, test
    3, test string
  </p>
 </body>
</html>

1,div#box.box1.box2(class='box3') 这种写法是emmet的写法 #就是id属性 点(.)就是class属性 括号也是属性写法

2,#abc.box1.box2.box3,全面没有给元素标签名称,默认就是给div标签加上这些属性

3,多行文本的两种写法

p.

1,this is
<strong>hello</strong>
2,test
3,string

多行文本第1种写法:p标签后面要跟一个. 里面用原始的html标签写法

p

| 1, this is
strong hello
| 2, test
| 3, test string

多行文本第2种写法: 文本前面用竖线 ( | ),标签后面跟内容

三、注释

jade模板代码:

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
  body
    h3 单行注释
    // div.box.box2 这是一段div
    h3 不会编译到html文件的注释
    //- div#box.box2.box3
    h3 块注释,也叫多行注释
    //- 
      input(type='checkbox', name='meinv', value='仙女') 仙女
      input(type='checkbox', name='meinv', value='御姐') 御姐
    h3 这里不是注释
    input(type='checkbox', name='meinv', value='仙女')
    | 仙女
    input(type='checkbox', name='meinv', value='御姐')
    | 御姐

编译之后:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade模板引擎学习-by ghostwu</title>
 </head>
 <body>
  <h3>单行注释</h3>
  <!-- div.box.box2 这是一段div-->
  <h3>不会编译到html文件的注释</h3>
  <h3>块注释,也叫多行注释</h3>
  <h3>这里不是注释</h3>
  <input type="checkbox" name="meinv" value="仙女">仙女
  <input type="checkbox" name="meinv" value="御姐">御姐
 </body>
</html>

1,单行注释

// div.box.box2 这是一段div

2,只在jade中注释,不会被编译到html文件

//- div#box.box2.box3

3,块注释( 多行文本注释 ),被注释的内容要另起一行

4,checkbox后面的显示文字部分 要注意,不要挨着属性的后面,要另起一行,写在竖线的后面

四、jade模板实战菜单

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    div#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

编译( jade index.jade -P -w )之后的效果: -w: 实时监控文件的修改,保存之后立刻刷新结果,也就是现代前端开发中很流行的热加载技术

基于Node.js模板引擎教程-jade速学与实战1

五、解释变量

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    div#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

#{}: 可以解释变量, toUpperCase():变量转大写

把json文件的数据在编译的时候传递到模板,

新建data.json文件数据

{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:
doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
  body
    h3 #{content}

编译命令:jade index2.jade -P -O data.json -O 指定一个json文件,把json文件的数据传递到模板

编译后的结果:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>JADE模板引擎学习-BY GHOSTWU</title>
 </head>
 <body>
  <h3>跟着ghostwu学习jade</h3>
 </body>
</html>

以上这篇基于Node.js模板引擎教程-jade速学与实战1就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
GRID拖拽行的实例代码
Jul 18 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 #Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 #Javascript
基于js的变量提升和函数提升(详解)
Sep 17 #Javascript
利用express启动一个server服务的方法
Sep 17 #Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 #Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 #Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 #Javascript
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
PHP初学者头疼问题总结
2006/07/08 PHP
编写自己的php扩展函数
2006/10/09 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
安全大检查反思材料
2014/01/31 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
主持词开场白
2014/03/17 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
个人公司授权委托书范本
2014/10/12 职场文书