Vue2.x-mustache模板引擎（笔记）

最新推荐文章于 2023-01-07 00:38:32 发布

我是真的狗

最新推荐文章于 2023-01-07 00:38:32 发布

阅读量856

点赞数 1

分类专栏： Vue2进阶文章标签： vue javascript es6 webpack 前端

本文链接：https://blog.csdn.net/wanghuan1020/article/details/113699725

版权

本文详细介绍了Vue2.x中mustache模板引擎的使用，从历史上的数据到视图方法，深入探讨mustache的基本用法和底层机理，并手把手教你如何实现一个mustache库。内容包括mustache库的原理、模板数据填充方法，以及通过扫描器类生成AST树的过程。

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

源码链接

https://github.com/wanghuan19961020/Vue2.x-Study-Notes

Vue2.x-mustache模板引擎（笔记）

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

纯 DOM 法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_数据变为视图-纯DOM法</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 (let 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 + '的基本信息'
      oLi.appendChild(hdDiv)
      // 创建 bd 这个 div
      let bdDiv = document.createElement('div')
      bdDiv.className = 'bd'
      // bdDiv.innerText = arr[i].name + '的基本信息'
      // 创建 3 个 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(bdDiv)
      // 创建的节点是孤儿节点，所以必须要上树才能让用户看见
      list.appendChild(oLi)
    }
  </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>02_数据变为视图-数组join法</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>

曾几何时非常流行，是曾经的前端必备知识

ES6 的反引号法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_数据变为视图-ES6反引号法</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>
      `
    }
  </script>

</body>

</html>

ES6 中新增 ${a} 语法糖，很好用

mustache 的基本使用

mustache 库简介

mustache 官方 git：https://github.com/janl/mustache.js
mustache 是 “胡子” 的意思，因为它的嵌入标记 { { }} 非常像胡子
{ { }} 的语法也被 Vue 沿用
mustache 是最早的模板引擎库，比 Vue 诞生的早多了，它的底层实现机理在当时是非常有创造性的、轰动性的，为后续模板引擎的发展提供了崭新的思路

mustache 的基本使用

必须引入 mustache 库，可以在 https://www.bootcdn.cn/ 上找到它
mustache 的模板语法非常简单，比如前述案例的模板语法如下：

{
  {#arr}}
  <li>
    <div class="hd">{
  {name}}的基本信息</div>
    <div class="bd">
      <p>姓名：{
  {name}}</p>
      <p>年龄：{
  {age}}</p>
      <p>性别：{
  {sex}}</p>
    </div>
  </li>
{
  {/arr}}

循环对象数组

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title

最低0.47元/天解锁文章

我是真的狗

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录