vue底层之mustache初识（1）

最新推荐文章于 2024-05-14 22:59:44 发布

简单的小伙子

最新推荐文章于 2024-05-14 22:59:44 发布

阅读量187

点赞数

分类专栏： vue 文章标签： js

本文链接：https://blog.csdn.net/weixin_44226789/article/details/114766172

版权

本文探讨了模板引擎的历史，特别是mustache作为早期模板引擎的角色。介绍了mustache的基本使用和核心机制，以及如何手动实现mustache。通过对比纯DOM操作、数组join和ES6的反引号法，强调了模板引擎在数据到视图转换中的优雅解决方案。最后，展示了mustache在实际中的应用，如在bootCDN上的引用。

摘要由CSDN通过智能技术生成

什么是模板引擎
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": "男" }
	];