介绍
本篇博客是基于尚硅谷的源码解析课程的第一篇,仅做笔记用,github仓库地址
纯DOM法(最底层):非常复杂麻烦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据变为视图DOM</title>
</head>
<body>
<ul id="list"></ul>
<script>
var arr = [
{"name": "小明", "age": 12, "sex": "男"},
{"name": "小明", "age": 12, "sex": "男"},
{"name": "小明", "age": 12, "sex": "男"},
]
var list = document.getElementById('list')
for (let i = 0; i < arr.length; i++) {
// 创建li标签
let oLi = document.createElement('li')
// 创建hd这个div
let hdDiv = document.createElement('div')
hdDiv.className = 'hd'
hdDiv.innerText = arr[i].name + '的基本信息'
let bdDiv = document.createElement('div')
bdDiv.className = 'bd'
let p1 = document.createElement('p')
p1.innerText = '姓名:' + arr[i].name
bdDiv.appendChild(p1)
let p2 = document.createElement('p')
p2.innerText = '年龄:' + arr[i].age
bdDiv.appendChild(p2)
let p3 = document.createElement('p')
p3.innerText = '性别:' + arr[i].sex
bdDiv.appendChild(p3)
// 内部文字
oLi.innerHTML = arr[i].name
oLi.appendChild(hdDiv)
oLi.appendChild(bdDiv)
// 创建呃节点时孤儿节点
list.appendChild(oLi)
}
</script>
</body>
</html>
数组join法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据变为视图DOM</title>
</head>
<body>
<ul id="list">
</ul>
<script>
var arr = [
{"name": "小明", "age": 12, "sex": "男"},
{"name": "小明", "age": 12, "sex": "男"},
{"name": "小明", "age": 12, "sex": "男"},
]
var list = document.getElementById('list')
// 遍历arr数组,每遍历一项就以字符串视角,添加到List中
for (let i = 0; i < arr.length; i++) {
list.innerHTML += [
'<li>',
' <div class="hd">' + arr[i].name + '</div>',
' <div class="bd">',
' <p>姓名:' + arr[i].name + '</p>',
' <p>年龄:' + arr[i].age + '</p>',
' <p>性别:' + arr[i].sex + '</p>',
' </div>',
'</li>'
].join('')
}
</script>
</body>
</html>
ES6反引号法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据变为视图DOM</title>
</head>
<body>
<ul id="list">
</ul>
<script>
var arr = [
{"name": "小明", "age": 12, "sex": "男"},
{"name": "小明", "age": 12, "sex": "男"},
{"name": "小明", "age": 12, "sex": "男"},
]
var list = document.getElementById('list')
// 遍历arr数组,每遍历一项就以字符串视角,添加到List中
for (let i = 0; i < arr.length; i++) {
list.innerHTML +=`
<li>
<div class="hd">${arr[i].name}</div>
<div class="bd">
<p>姓名:${arr[i].name}</p>
<p>年龄:${arr[i].age}</p>
<p>性别:${arr[i].sex}</p>
</div>
</li>
`
}
</script>
</body>
</html>
mustache的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="container"></div>
<script src="jslib/mustache.js"></script>
<script>
var templateStr = `
<ul>
{{#arr}}
<li>
<div class="hd">{{name}}</div>
<div class="bd">
<p>姓名:{{name}}</p>
<p>年龄:{{age}}</p>
<p>性别:{{sex}}</p>
</div>
</li>
{{/arr}}
</ul>
`;
var data = {
arr: [
{"name": "小明", "age": 12, "sex": "男"},
{"name": "小明", "age": 12, "sex": "男"},
{"name": "小明", "age": 12, "sex": "男"},
]
}
var domStr = Mustache.render(templateStr, data);
var container = document.getElementById('container')
container.innerHTML = domStr
</script>
</body>
</html>
其他
/* 简单循环
* <ul>
* {{#arr}}
* <li>{{.}}</li>
* {{/arr}}
* </ul>
*
* data = {
* arr:['A','B',''C]
* }
*
* */
var templateStr = `
<ul>
{{#arr}}
<li>
{{name}}的爱好是:
<ol>
{{$hobbies}}
<li>{{.}}</li>
{{/hobbies}}
</ol>
</li>
{{/arr}}
</ul>
`;
//数组嵌套
data = {
arr:[
{'name':'小明','age':12,'hobbies':['游泳','羽毛球']},
{'name':'小明','age':12,'hobbies':['游泳','羽毛球']},
{'name':'小明','age':12,'hobbies':['游泳','羽毛球']},
]
}
var templateStr2 = `
{{#m}}
<h1>你好</h1>
{{/m}}
`
//bool值
data2 = {
m:false
}