vue源码之mustache模板引擎1

模板引擎的一个有点：它是将数据转为视图的最优雅的方法

对于下面的数据

[{"name":"小名",'age':"12","sex":'男'},{"name":"小红",'age':"12","sex":'女'},{"name":"小王",'age':"12","sex":'男'},
]

相信vue的玩家首先想到的是

<ul><template  v-for="item in data"><li class="hd">{{ item.name }}的信息</li><li class="bd"><p>姓名{{ item.name }</p><p>年龄{{ item.name }}</p><p>性别{{ item.name }}</p></li>
</template></ul>

而还没学vue的朋友，就只能进行dom操作了

像纯DOM

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul></ul><script>let arr = [{ "name": "小名", 'age': "12", "sex": '男' },{ "name": "小红", 'age': "12", "sex": '女' },{ "name": "小王", 'age': "12", "sex": '男' },]let ul = document.querySelector('ul')for (const item of arr) {let li = document.createElement('li')let div1 = document.createElement('div')div1.className = 'hd'let div2 = document.createElement('div')div2.className  =  'bd'div1.innerHTML = item.name + '的基本信息'let p1 = document.createElement('p')let p2 = document.createElement('p')let p3 = document.createElement('p')p1.innerHTML = '姓名：' + item.name p2.innerHTML = '年龄：' + item.age p3.innerHTML = '性别：' + item.sexdiv2.appendChild(p1)div2.appendChild(p2)div2.appendChild(p3)li.appendChild(div1)li.appendChild(div2)ul.appendChild(li)}</script>
</body></html>

通过数组的join方法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul></ul><script>let data = [{ "name": "小名", 'age': "12", "sex": '男' },{ "name": "小红", 'age': "12", "sex": '女' },{ "name": "小王", 'age': "12", "sex": '男' },]let ul = document.querySelector('ul')for (const item of data) {let arr = ['<li>','    <div class="hd">'+item.name+'的信息</div>','    <div class="bd">','        <p>姓名：'+item.name+'</p>','        <p>年龄：'+item.age+'</p>','        <p>性别：'+item.sex+'</p>','    </div>','</li>',]let htmlStr = arr.join('')ul.innerHTML += htmlStr}</script>
</body></html>

以及es6推出的模板字符串

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul></ul><script>let ul = document.querySelector('ul')let data = [{ "name": "小名", 'age': "12", "sex": '男' },{ "name": "小红", 'age': "12", "sex": '女' },{ "name": "小王", 'age': "12", "sex": '男' },]for (const item of data) {ul.innerHTML += `<li><div class="hd">${item.name}的信息</div><div class="bd"><p>姓名：${item.name}</p><p>年龄：${item.age}</p><p>性别：${item.sex}</p></div></li>`}</script>
</body></html>

此为实现的效果