vue底层之mustache初识

Posted 2022-12-05 简单的小伙子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue底层之mustache初识相关的知识，希望对你有一定的参考价值。

什么是模板引擎
mustache基本使用
mustache的底层核心机理
带你手写实现mustache

什么是模板引擎：
结论：模板引擎是将数据要变为视图最优雅的解决方案

其他：mustache又称为小胡子

历史上将数据变为视图的方法

纯Dom法：

直接进行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>
	<ui id="list">
	</ui>
</body>
<script>
	var arr = [
		 "name": "小明", "age": "23", "sex": "男" ,
		 "name": "小张", "age": "23", "sex": "女" ,
		 "name": "小耿", "age": "23", "sex": "女" ,
		 "name": "小李", "age": "23", "sex": "男" 
	];
var list = document.getElementById("list")
	for(let i = 0; i < arr.length; i++) 
		// 每遍历一项，都要用DOM方法去创建li标签
		let oli = document.createElement("li");
		oli.innerHTML = arr[i].name;
		// 创建的节点都是孤儿节点，需要上树才能被用户看见
		list.appendChild(oli)
	
</script>

</html>

效果图，想要回显更多的数据，就要进行更多的dom操作，此处就不一一进行操作，理解dom法将数据变为视图就好。

数组join法：

首先：字符串中是不能进行转弯的（ES6中的反引号之前），在这之前有人发现了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>
	<ui id="list">

	</ui>

</body>
<script>
	var arr = [
		 "name": "小明", "age": "23", "sex": "男" ,
		 "name": "小张", "age": "23", "sex": "女" ,
		 "name": "小耿", "age": "23", "sex": "女" ,
		 "name": "小李", "age": "23", "sex": "男" 
	];
	// 实际上是没有换行的，但是进行代码阅读的时候，有换行的感觉，让人读起来更有逻辑感
	// 可以在代码之中记性斩断链接（字符串拼接）
	var list = document.getElementById("list")
	// 遍历arr数组，每遍历一项，就以字符串的视角将HTML字符串中
	for (let i = 0; i < arr.length; i++) 
		liat.innerHTML += [
			'<li>',
			'	<div class="hd">'+arr[i].name+'的信息'+'</div>',
			'	<div class="bd">',
			'		<P>姓名：</P>',
			'		<P>年龄：</P>',
			'		<P>性别：</P>',
			'	</div>',
			'</li>'
		].join('')
	

	var str = [
		'<li>',
		'	<div class="hd"></div>',
		'	<div class="bd">',
		'		<P>姓名：</P>',
		'		<P>年龄：</P>',
		'		<P>性别：</P>',
		'	</div>',
		'</li>'
	].join('');

</script>

</html>

ES6中的反引号法

在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>
	<ui id="list">
	</ui>
</body>
<script>
	var arr = [
		 "name": "小明", "age": "23", "sex": "男" ,
		 "name": "小张", "age": "23", "sex": "女" ,
		 "name": "小耿", "age": "23", "sex": "女" ,
		 "name": "小李", "age": "23", "sex": "男" 
	];
	// 实际上是没有换行的，但是进行代码阅读的时候，有换行的感觉，让人读起来更有逻辑感
	// 可以在代码之中记性斩断链接（字符串拼接）
	var list = document.getElementById("list")
	// 遍历arr数组，每遍历一项，就以字符串的视角将HTML字符串中
	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>
</html>

效果图，前两个例子也应该是这个图

模板引擎法

mustache是模板引擎中比较古老的一个，模板引擎中的鼻祖
bootCDN：链接
bootCDN是一个对第三方插件的一个官方的引用地址，可以将第三方插件直接使用CDN方式引入，相当于镜像网址。
mustache的用法：
# arr// 开始循环这个数组 / arr// 循环这个数组结束

以上是关于vue底层之mustache初识的主要内容，如果未能解决你的问题，请参考以下文章