基于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 相关文章推荐
IE的fireEvent方法概述及应用
Feb 22 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
浅谈函数调用的不同方式,以及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
php数组去重复数据示例
2014/02/25 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
Vue.js常用指令的使用小结
2017/06/23 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python 实现多线程下载视频的代码
2019/11/15 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
考博自荐信
2013/10/25 职场文书
入团者的自我评价分享
2013/12/02 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
计划生育目标责任书
2015/05/09 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
Python数据类型最全知识总结
2021/05/31 Python
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android