Vue源码探秘之mustache模板引擎

最新推荐文章于 2024-05-07 01:15:52 发布
最新推荐文章于 2024-05-07 01:15:52 发布
阅读量389 收藏
点赞数
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Android_boom/article/details/125510223
版权

mustache模板引擎知识前置

说白了，本篇从源码的角度，给我讲明白，双花括号如何就能拿到指定的数值，并展示到视图。

一、什么是模板引擎

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

1.0 历史上曾经出现的数据变为视图的方法

纯DOM法：非常笨拙， 没有实战价值
数组join法：曾几何时非常流行， 是曾经的前端必会知识
ES6的反引号法：ES6中新增的`${a}`语法糖， 很好用
模板引擎：解决数据变为视图的最优雅的方法

1.1 数据变为视图-纯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 id="list">
    </ul>

    <script> var arr = [
            { "name": "小明", "age": 12, "sex": "男" },
            { "name": "小红", "age": 11, "sex": "女" },
            { "name": "小强", "age": 13, "sex": "男" }
        ];

        var list = document.getElementById('list');

        for (var i = 0; i < arr.length; i++) {
            // 每遍历一项，都要用DOM方法去创建li标签
            let oLi = document.createElement('li');
            // 创建hd这个div
            let hdDiv = document.createElement('div');
            hdDiv.className = 'hd';
            hdDiv.innerText = arr[i].name + '的基本信息';
            // 创建bd这个div
            let bdDiv = document.createElement('div');
            bdDiv.className = 'bd';
            // 创建三个p
            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.appendChild(hdDiv);
            // 创建的节点是孤儿节点，所以必须要上树才能被用户看见
            oLi.appendChild(bdDiv);
            // 创建的节点是孤儿节点，所以必须要上树才能被用户看见
            list.appendChild(oLi);
        } </script>
</body>

</html>

1.2 数据变为视图-数组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 id="list"></ul>

    <script> var arr = [
            { "name": "小明", "age": 12, "sex": "男" },
            { "name": "小红", "age": 11, "sex": "女" },
            { "name": "小强", "age": 13, "sex": "男" }
        ];

        var list = document.getElementById('list');

        // 遍历arr数组，每遍历一项，就以字符串的视角将HTML字符串添加到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>

1.3 数据变为视图-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 id="list"></ul>

    <script> var arr = [
            { "name": "小明", "age": 12, "sex": "男" },
            { "name": "小红", "age": 11, "sex": "女" },
            { "name": "小强", "age": 13, "sex": "男" }
        ];

        var list = document.getElementById('list');

        // 遍历arr数组，每遍历一项，就以字符串的视角将HTML字符串添加到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].sex}</p>    
                        <p>年龄：${arr[i].age}</p>    
                    </div>    
                </li>
            `;
        } </script>
</body>

</html>

二、mustache的基本使用

• mustache官方git： github.com/janl/mustac…
• mustache是“胡子” 的意思， 因为它的嵌入标记{ { }}非常像胡子。没错， { { }}的语法也被Vue沿用， 这就是我们学习mustache的原因。
• mustache是最早的模板引擎库， 比Vue诞生的早
最低0.47元/天 解锁文章
Web_boom
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Mustache模板技术，一个比freemarker轻量级的模板引擎
清心寡欲，做一个专注的程序员
05-26 1万+
一、初识Mustache 同样也是看Dropwizard才知道这个东西的，以前一直是知道诸如freemarker这样的模板引擎，这个是头一次听说，但是听周围的朋友说最早这个东西是出自于JS的，Dropwizard推荐使用这个东西，而且到mustache官网看了一下，发现十几种语言已经支持这个模板引擎技术，火热程度甚至超过了freemarker，看来到了不得不学的地步了，先来看看mustach
Vue之mustache模板引擎（笔记整理）
yan_danfeng的博客
06-03 2168
01 什么是模板引擎？ **模板引擎**是将数据转变为视图最优雅的方案。
mustache模板引擎
weixin_48819493的博客
08-29 131
vue 模板引擎
Vue源码：mustache模板引擎学习
最新发布
2401_84092483的博客
05-07 354
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
探究Vue源码:mustache模板引擎(2) mustache使用方法
weixin_45966674的博客
06-06 589
mustache是最早的模板引擎 比vue的诞生还要早很多 而他的语法 就是基于 {{ }} 这样的双花括号。我们可以看到 我们直接通过 {{ 属性名 }} 就可以像vue的写法一样 去那响应式数据了。然后循环遍历他 里面写的 {{ name }} 就是取循环出来的每个下标的name值。我们就用刚刚改变script的type的方法将页面模板放进去了 然后 定义了一个id。简单说 就是 {{ #需要循环的字段 }} 内容 {{ /需要循环的字段 }}
视图模板引擎——Vue【双向绑定】原理剖析
热门推荐
主要领域：前端开发
08-14 3万+
首先我们来了解一下MVC、MVP、MVMM这三大架构模式在前端角度上的理解。 MVC分别是 Model（模型）、View（视图）、Controller（控制器）三个模块。View（视图层）最主要完成前端的数据展示，Controller（控制层）是对数据的接收和触发事件的接收和传递，Model（模型层）则是对数据的储存和处理，再传递给视图层相应或者展示。如下图所示，整个过程是单链条的传递，在前端开发...
vue之mustache原理
wjq_xxq的博客
07-12 432
mustache原理一、什么是模板引擎二、mustache的用法三、mustache底层核心四、手写mutache库1：首先创建项目，创建数据2：创建方法使模板字符串转换成tokens3：把tokens转成html 一、什么是模板引擎 模板引擎是将数据转换为视图最优雅的方案 ,历史上曾经出现的数据变为视图的方法（四种）: 纯DOM法 ； let oLi = document.createElement('li'); let hdDiv = document.createElement('div');
VUE3动漫影视网站模板源码
01-29
VUE3动漫影视视频网站模板源码，功能最全，好看的动漫网站模板，视频网站模板，主要以动漫视频介绍为主，视频网站以六个板块（视频网站首页，视频网站视频详情，视频网站视频播放，视频网站娱乐前线，视频网站合作...
vue源码探究辅助工具mustache.js
06-06
帮助更多希望读懂vue源码的朋友们理解mustache工具
vue源码解析.zip
05-13
本资料"vue源码解析.zip"包含了一份名为"vue.pdf"的文档，预计会详细阐述Vue的核心概念、设计模式以及源码实现。 首先，Vue.js 的核心特性包括双向数据绑定、组件系统、指令系统和虚拟DOM。双向数据绑定通过`v-...
Vue源码分析之Vue实例初始化详解
01-19
这一节主要记录一下：Vue 的初始化过程 以下正式开始： Vue官网的生命周期图示表 重点说一下 new Vue()后的初始化阶段，也就是created之前发生了什么。 initLifecycle 阶段 export function initLifecycle (vm: ...
mustache 前端渲染模板
08-23
（积分会自动改，需要的留言）实例https://blog.csdn.net/github_38854224/article/details/88012869
Mustache一个Mustache模板语言的PHP实现
08-08
Mustache：一个Mustache模板语言的PHP实现
mustache源码解读
Gloomysunny的博客
01-27 483
1. mustache 以前js大批量生成 html的方式 // 1. dom for(let i = 0; i < 10 ; i++) { const div = document.createElement('div') div.innerHTML = i document.body.appendChild(div) } // 2. 字符传拼接 let htmlStr = '' for(let i = 0; i < 10; i++) { htmlStr +=
Mustache
ice_yr的博客
03-09 247
可以通过Mustache语法(也就是双大括号)，将data中的文本数据，插入到HTML mustache语法，不仅可以直接写变量，也可以写简单的表达式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
学习Vue的mustache语法-mustache模板引擎
ranshuang1的博客
12-22 474
学习mustache的总结
VUE源码：模板引擎mustache
qq_45861785的博客
04-07 1542
文章目录模板引擎的定义mustache的基本使用 模板引擎的定义 模板引擎就是将数据变为视图最优雅的解决方案 例如：VUE的v-for、mustache 历史上数据变为视图方法： 纯DOM方法 数组join ES6的反引号法：``${a} ` 模板引擎 mustache的基本使用 官方git:https://github.com/janl/mustache.js 例子： let arr = [ { name: "小红", sex: "女", age: 18 }, { name: "小黑", s
Vue之Mustache语法
兮动人
06-22 1855
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{message}}</h2> <h2>{{message}}，兮动人</h2&gt...
vue3文本插值与模板引擎冲突
11-19
根据提供的引用内容，Vue3 中的文本插值与模板引擎不会冲突。Vue3 中的文本插值使用双大括号 {{}}，而模板引擎使用反引号 ``。Vue3 中的模板引擎可以通过使用 v-html 指令来渲染 HTML 代码。以下是一个示例： ```html <template> <div> <p>{{ message }}</p> <div v-html="htmlCode"></div> </div> </template> <script> export default { data() { return { message: 'Hello, Vue3!', htmlCode: '<span style="color: red;">This is HTML code.</span>' } } } </script> ``` 在上面的示例中，message 使用文本插值，而 htmlCode 使用模板引擎和 v-html 指令来渲染 HTML 代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值