探究Vue源码:mustache模板引擎(1) 什么是模板引擎

news2024/11/24 14:29:35

之前在讲虚拟dom和diff算法时说过后续会讲模板引擎 啊 那这边 说到做到哈
对这个问题 有个比较官方的回答 模板引擎是将数据变为视图的最优雅的解决方案
在这里插入图片描述
比如 将左侧数据变为右侧视图 大家应该最先想到的就是 v-for
其实 v-for 就是一种模板引擎语法

从图中看出 模板引擎处理的这个过程可以说非常优雅
那么 就带出了另一个问题 在模板引擎推出之前 又是怎么处理的呢?
在数据转dom这个处理上 经历了大体下图几个过程
在这里插入图片描述
当然 可能大家对他们并不熟悉 我们用代码来演示一下

到后面 你会发现 是一个不断优化 代码也越来越美观的过程

先随便建一个html文件 然后用编辑器打开
在这里插入图片描述
我们先编写界面代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id = "list">

    </ul>
    <script>
        var arr = [
            {
                "name": "小猫猫",
                "age": 12,"sex":"男"
            },
            {
                "name":"小红",
                "age": 11,
                "sex":"女"
            },{
                "name":"小强",
                "age": 13,
                "sex":"男"
            }
        ]
    </script>
</body>
</html>

现在 我们希望将这些数据 写入到 ul中

首先 我们来用纯DOM法
参考代码如下

//获取list ul节点
var list = document.getElementById('list');
 for (var i = 0; i < arr.length; i++) {
     //创建一个li标签的孤儿节点
     let oLi = document.createElement('li');
     //利用innerText将内容写入创建的孤儿节点
     oLi.innerText = arr[i].name;
     //将新节点插入到list节点中
     list.appendChild(oLi);
 }

在这里插入图片描述

打开页面
在这里插入图片描述
简单说 就是
循环数据 创建出一个一个的孤儿节点 然后写入数据 再手动插入
可以说写的相当麻烦

然后 我们来看 数组join法
我们编写代码如下

//获取list ul节点
var list = document.getElementById('list');

//循环遍历数据
for (var i = 0; i < arr.length; i++) {
    //通过innerHTML  将字符串以html格式写入ul标签中
    list.innerHTML += [
        "<li>"+arr[i].name,
        "</li>"
    ].join("")
    //join用于将数组转为字符串
}

打开界面
在这里插入图片描述
可以看到 数组也是顺利的上去了

字符串要实现换行可以用反引号 但这个写法要到ES6才有的
这个join在他之前出现 给了这个思想
就是通过数组实现这个一行一行的效果 用于书写html标签
然后通过join将数组变成字符串 通过innerHTML写入到元素之中

很明显 这样 他就比原生的纯DOM写法好看多了
这个方法 也层是前端 必会的 不过在vue面前 确实是弱爆 了

然后是ES6反引号方法 其实这个叫 模板字符串
参考代码如下

//获取list ul节点
var list = document.getElementById('list');

//循环遍历数据
for (var i = 0; i < arr.length; i++) {
    //通过innerHTML  将模板字符串写入节点
    list.innerHTML += `
        <li>
            ${arr[i].name}
        </li>`
}

模板字符串的好处在于 你可以直接在字符串里换行去写html语法 配合上innerHTML 是非常非常的好用
不过 这是一个ES6语法 虽然微软都放弃IE了 但目前 如果你希望自己的网页兼容性特别强 最好还是别用

当然 最优雅的还是模板引擎
我们下文开始讲mustache模板引擎
mustache应该是最早的模板引擎 可以帮助大家理解vue内部的一个原理思路

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/624408.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux文件理解和系统调用

本文已收录至《Linux知识与编程》专栏&#xff01; 作者&#xff1a;ARMCSKGT 演示环境&#xff1a;CentOS 7 文件理解和系统调用 前言正文文件概念文件描述符文件描述符概念文件管理关于 files_struct文件描述符的分配一切皆文件思想 C语言文件操作文件的打开与关闭文件读写 文…

IMX6ULL裸机篇之SPI原理图

一. IMX6ULL的 SPI 实验 I.MX6ULL 有4 个 SPI 接口&#xff0c;可以通过这 4 个 SPI 接口来连接一些 SPI 外设。 I.MX6U-ALPHA 使用 SPI3 接口 连接了一个六轴传感器 ICM-20608 &#xff0c;本章我们就来学习如何使用 I.MX6U 的 SPI 接口来驱动 ICM-20608…

【vue3】09-vue组件化额外知识补充(上)-生命周期-ref引用

组件化-额外知识补充&#xff08;上&#xff09; 生命周期认识生命周期生命周期函数的演练 refs引用 生命周期 认识生命周期 什么是生命周期呢? 生物学上&#xff0c;生物生命周期指得是一个生物体在生命开始到结束周而复始所历经的一系列变化过程;每个组件都可能会经历从创…

适应新时代的FTP已经出现?这种产品有何过人之处?

大家都知道&#xff0c;FTP是用于在网络上进行文件传输的一套标准协议&#xff0c;它作为互联网最经典的协议之一&#xff0c;至今已经存在了50年。而随着时代发展&#xff0c;越来越多的用户与企业开始觉得FTP不够满足大家的需求&#xff0c;出现的问题与漏洞越来越多&#xf…

好用工具第4期:全能播放器PotPlayer

好用工具第4期:全能播放器PotPlayer Global Potplayer 是一款 Windows 平台的全能播放器。支持几乎所有的视频格式&#xff0c;音频格式&#xff0c;以及在线播放全世界的电视直播。 其官网是&#xff1a; https://potplayer.daum.net/?langzh_CN 特点 支持强劲引擎加速支持3…

【微服务】SpringCloudAlibaba

一 微服务架构 1.1 微服务 微服务其实是一种架构风格&#xff0c;我们在开发一个应用的时候这个应用应该是由一组小型服务组成&#xff0c;每个小型服务都运行在自己的进程内&#xff1b;小服务之间通过HTTP的方式进行互联互通。 1.2 微服务架构的常见问题 一旦采用微服务系…

【论文阅读】(2013)Exact algorithms for the bin packing problem with fragile objects

文章目录 一、摘要二、介绍三、之前在这个问题上的工作四、易碎物品背包问题的求解4.1 ILP模型4.2 基于KP01的方法4.3 动态规划 五、二元分支方案5.1 分支方案1&#xff08;基于决策变量的分支&#xff09;5.2 分支方案2&#xff08;基于yj和xji的分支&#xff09;5.3 将L2嵌入…

精进嵌入式系统设计

当涉及到嵌入式系统设计时&#xff0c;以下是一些建议和关键点&#xff0c;可以帮助您进行有效的设计&#xff1a; 确定需求&#xff1a;明确系统设计的功能需求和性能指标。了解系统的预期用途、功能要求、资源限制和实时性需求等。 硬件选择&#xff1a;根据需求选择合适的硬…

Visio matlab 图像取消边框

visio 图像取消边框 1.菜单栏→文件→选项→自定义功能区→勾选“开发工具”→确定 2.菜单栏→开发工具→显示ShapeSheet→页→Print Properties→将“PageLeftMargin”、“PageRightMargin”、“PageTopMargin”和“PageBottomMargin”均修改为0 &#xff08;双击单元格来编辑…

报表生成器FastReport .Net用户指南:“Text“对象、文本编辑

FastReport .Net是一款全功能的Windows Forms、ASP.NET和MVC报表分析解决方案&#xff0c;使用FastReport .NET可以创建独立于应用程序的.NET报表&#xff0c;同时FastReport .Net支持中文、英语等14种语言&#xff0c;可以让你的产品保证真正的国际性。 FastReport.NET官方版…

微软MFC程序运行的正确顺序

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天来看一下微软MFC程序运行的正确顺序。这真的只是一个小众话题。但是对理解MFC很重要。 很多人写了一堆MFC程序&#xff0c;却不知道MFC程序是怎么运行顺序的。我们就来看一看这个问题。 我在之前的帖子中…

Java IO模型图解(BIO NIO AIO)

一、冯诺伊曼模型 如图&#xff1a; 图片来源&#xff1a;百度百科 输入设备向计算机输入数据&#xff0c;输出设备接收计算机输出的数据。 所有的计算机程序&#xff0c;也都可以抽象为从输入设备读取输入信息&#xff0c;通过运算器和控制器来执行存储在存储器里的程序&am…

热修复/热更新

热修复/热更新 一.Android热修复二.热修复框架三.类加载器0.BootClassLoader1.PathClassLoader2.DexClassLoader 四.实现思路五.代码1.FixManager2.App3.更加标准的代码 五.制作补丁包1.写段有bug的工具类&#xff0c;并写个点击按钮调用2.运行项目到模拟器上3.修复ToastUtils工…

node_modules插件代码修改,如何快速修改防止npm install安装覆盖代码

一、背景 有些组件不满足业务时咱们只能修改插件的源码&#xff1a; 直接在项目的node_modules下找到插件的源码直接修改&#xff1b; 优点&#xff1a;简单直接、快速见效&#xff1b;缺点&#xff1a;不能持久化&#xff0c;一旦重新npm install安装就失效&#xff1b;不方…

(五)ArcGIS空间数据的转换与处理——数据处理

ArcGIS空间数据的转换与处理——数据处理 目录 ArcGIS空间数据的转换与处理——数据处理 1.数据裁剪1.1矢量数据裁剪1.1.1图解1.1.2用法1.1.3操作步骤 1.2栅格数据裁剪1.2.1矩形裁剪1.2.2利用已有数据裁剪 2.数据拼接2.1矢量数据的拼接2.1.1图解2.1.2用法2.1.3 操作步骤 2.2栅格…

区块链学习三——比特币的数据结构

区块链学习三——比特币的数据结构 文章内容来源于北京大学肖臻老师《区块链技术与应用》公开课 文章目录 区块链学习三——比特币的数据结构 一、哈希指针&#xff08;hash pointers&#xff09;二、区块链三、Merkle tree1.Merkle tree的作用&#xff1a;Merkle Proof2.Proo…

2023最新版本Activiti7系列-任务分配

任务分配 1.固定分配 在指派用户任务的审批人时。我们是直接指派的固定账号。但是为了保证流程设计审批的灵活性。我们需要各种不同的分配方式&#xff0c;所以这节我们就详细的来介绍先在Activiti7中我们可以使用的相关的分配方式. 固定分配就是我们前面介绍的&#xff0c;在绘…

vr沉浸式仿真实训展厅中控系统提高课堂纪律

为解决实训教学过程中“看不到、进不去、成本高、危险大”的问题&#xff0c;VR智能中控系统为职业教育及高等教育老师提供一个数字化、沉浸式、集中管控的实训教学工具。 VR智能中控系统通过对VR教学课堂的实时监控、数据的收集和分析&#xff0c;为气象学院的教学提供更多帮助…

STM32 HAL库 使用 USB HID 配置

STM32 HAL库 HID 配置 STM32 CubeMax 配置修改USB描述符修改HID设备PID VID修改HID报告间隔修改USB报告长度发送和接收发送接收 STM32 CubeMax 配置 我这里使用的是HS接口但使用的是内部FS核。 修改USB描述符 在 usbd_custom_hid_if.c 的 CUSTOM_HID_ReportDesc_HS 或 CUSTO…

python基础----08-----json、pyecharts模块介绍以及折线图、地图、柱状图的绘制

一 python变量和json数据的相互转化 json就是 一种在各个编程语言中流通的数据格式&#xff0c;负责不同编程语言中的数据传递和交互、类似于: 国际通用语言 -英语。 import json if __name__ __main__:# 1. 将python变量转成json(列表->json)# 准备列表&#xff0c;列表内…