jade入门

最新推荐文章于 2019-07-27 14:12:00 发布

凌晨独舞

最新推荐文章于 2019-07-27 14:12:00 发布

阅读量467

点赞数

分类专栏： Javascript 文章标签： html 插件 jade

本文链接：https://blog.csdn.net/Merciwen/article/details/73766024

版权

Javascript 专栏收录该内容

72 篇文章 1 订阅

订阅专栏

jade是什么

jade是一种模版引擎，省略了很多尖括号。有点像 emmet 插件按tab期之前的样子

安装：

npm install jade –global

直接看案例吧

doctype html
 //编译出来的结果
<!DOCTYPE html>


ul
    li.item Item1
    li.item Item2
    li.item Item3
    li.item Item4
//编译出来的结果
<ul>
    <li class="item">Item1</li>
    <li class="item">Item2</li>
    <li class="item">Item3</li>
    <li class="item">Item4</li>
</ul>

doctype html
html
  head
  body
    h1.titleClass#titleID My First Jade Page

//编译出来的结果
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 id="titleID" class="titleClass">My First Jade Page</h1>
  </body>
</html>


a(href='http://www.baidu.com', target='_blank') 我的主页

//编译出来的结果
<a href="http://www.baidu.com" target="_blank">我的主页</a>


// 这个单行注释会输出到编译后的文件中 
p 单行输出注释 
//- 这个单行注释不会输出到编译后的文件中 
p 单行不输出  

//编译出来的结果     

<!-- 这个单行注释会输出到编译后的文件中--> 
<p>单行输出注释</p>
<p>单行不输出注释</p>
 输出和不输出的差别就在于多了一个 -，谨记

属性

input(type='checkbox', checked)  
input( 
    type='checkbox' 
    name='agreement' 
    checked
)
生成的 HTML：
<input type="checkbox" checked> 
<input type="checkbox" name="agreement" checked>

- var authenticated = true 
 body(class=authenticated ? 'authed' : 'anon') 
 - var currentUrl = '/about'  
 a(class={active: currentUrl === '/'} href='/') Home  
a(class={active: currentUrl === '/about'} href='/about') About 
生成的 HTML：
<body class="authed"></body> 
<a href="/">Home</a><a href="/about" class="active">