当前位置:首页 > Web开发 > 正文

height:100px}) 测试 div div(class=test) 我是类名位test的div .test 我是

2024-03-31 Web开发

jade -P -w index.jade 在文件夹jade下监听文件变革,即生成html

index.jade文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
  doctype html
html
head
meta(charset='utf-8')
title 我的网站
body
div
|hehe
a: img(src='#')
div(style={width:"100px",height:"100px"})
测试 div
div(class='test') 我是类名位test的div
.test 我是类名位test的div
#myid 我是id名为myid的div
.myclass#myids 我是有id也有class的div
-var name='张三'
div
名字是#{name}
// 我是注释
//
我是注释一
我是注释二
//- 我是jade注释
//-
我是jade注释一
我是jade注释二
ul
-for(var i=0;i<3;i++)
li 我是循环的li
-var arr = ["小明","小宏","夏培"]
for val in arr
p #{val}
-var arr = [{name:"小华",age:"20"},{name:"李欣",age:"10"}]
for val in arr
p 姓名是 #{val.name} 春秋是 #{val.age}
-var obj = {name:"皇妃",age:"25"}
for item,index in obj
p 属性是 #{index} 属性值是 #{item}
-var judge = true
if judge
p judge的值是true
else
p judge的值是false
-var num = 3
case num
when 1
p #{num}的值即是1
when 2
p #{num}的值即是2
when 3
p #{num}的值即是3
default
p #{num}是其他值
//- js写法
script(type='text/javascript').
console.log("你好")
function test(){
console.log("我是test函数")
}
//- 封装函数
mixin list
ul
-for(var i=0;i<3;i++)
li 我是li里地内容
//- 挪用封装函数
+list
+list
//- 界说宠物的html
mixin pet(name,sex)
p 宠物的名字是 #{name}宠物的性别是 #{sex}
//- 传参挪用
+pet("大黄","母")
+pet("小强","公")
 

jade根基语法:

1.通过缩进关系,取代以往html的层级包罗关系,如 个简单的静态 可以表达为,注意要统一使用tab或者空格缩进,不要混用

2.内联书写层级,a: img

3.style属性:div(style={width:”200px”,color:”red”})

4.使用”-”来界说变量,使用“=”把变量输出到元素内;

5.通过 #{variable} 插 相应的变 值

6.html 元素属性通过在标签右边通过括号包罗(可以通过判断来添加)

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/32325.html