mustcache

什么是模板引擎

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

数据

[

  {"name":"小明","age":12,"sex":"男"}，

  {"name":"小红"，"age":11,"sex":"女"},

  {"name":"小强","age":13,"sex":"男"}

]

视图

<ul>

  <li>

    <div class = "hd">小明的基本信息</div>

    <div class= "bd">

      <p>姓名:小明</p>

      <p>年龄:12</p>

      <p>性别:男</p>

    </div>

  </li>

  <li>

    <div class = "hd">小红的基本信息</div>

    <div class= "bd">

      <p>姓名:小红</p>

      <p>年龄:11</p>

      <p>性别:男</p>

    </div>

  </li>

</ul>

如何将数据转变为视图

曾出现过的数据转变为视图的方法

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

纯DOM

<!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>模板引擎-纯dom</title>

</head>

<body>

    <ul id="list">

    </ul>

    <script>

        var arr = [

            { "name": "小明", "age": 12, "sex": "男" },

            { "name": "小红", "age": 12, "sex": "女" },

            { "name": "小强", "age": 11, "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('li');

            hdDiv.className = 'hd';

            hdDiv.innerText = arr[i].name + '的基本信息';

            oLi.appendChild(hdDiv);

            // 创建bd这个div

            let bdDiv = document.createElement('div');

            bdDiv.className = 'bd';

            // 创建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法

简单演示

<body>

</body>

<script>

    var str1 = ['a',

        'b',

        'c',

        'd',].join('');

    var str2 = [

        '<li>',

        ' <div class = "hd">小明的基本信息</div>',

        ' <div class= "bd">',

        '   <p>姓名:小明</p>',

        '   <p>年龄:12</p>',

        '   <p>性别:男</p>',

        ' </div>',

        '/li>',

    ].join('')

    console.log(str1,str2)

</script>

</html>

将数据转化为视图代码

<body>

    <ul id="list">

    </ul>

</body>

<script>

    var arr = [

        { "name": "小明", "age": 12, "sex": "男" },

        { "name": "小红", "age": 12, "sex": "女" },

        { "name": "小强", "age": 11, "sex": "男" }

    ];

    // 遍历arr 数组，每遍历一项，就以字符串的视角

    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>

</html>

虚拟DOM与diff算法

什么是虚拟DOM与Diff 算法

snabbdom--->snabbdom 的h函数是何如工作的--->diff 算法--->手写diff算法

snabbdom是瑞典语单词，单词原意"速度"

snabbdom 是著名的DOM库，是diff算法的鼻祖，Vue 源码借鉴了snabbdom

git:

snabbdom是DOM库，当然不能在nodejs环境运行，所以我们需要搭建webpack和webpack-dev-server开发环境

Vue模板解析的更多相关文章

  1. Vue模板内容

    前面的话 如果只使用Vue最基础的声明式渲染的功能,则完全可以把Vue当做一个模板引擎来使用.本文将详细介绍Vue模板内容 概述 Vue.js使用了基于HTML的模板语法,允许声明式地将DOM绑定至底 ...

  2. Vue2.0原理-模板解析

    下面这段代码,vue内部做了什么操作?我去源码里面找找看 new Vue({ el: '#app' }) 入口 vue 的入口文件在 src/core/instance/index.js, 里面一进来 ...

  3. webpack4.x加vue模板文件简单还原vue-cli

    1.首先 npm init -y 创建一个项目 2.安装vue npm install vue --save 3.然后安装webpack 注意如果全局没有还要安装全局的webpack和webpack- ...

  4. Vue基础系列（三）——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  5. [Vue源码]一起来学Vue模板编译原理(一)-Template生成AST

    本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vu ...

  6. [Vue源码]一起来学Vue模板编译原理（二）-AST生成Render字符串

    本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...

  7. Vue 模板语法 && 数据绑定

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  8. 初始Vue、Vue模板语法、数据绑定（2022/7/3）

    文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...

  9. vert.x学习（四），使用模板解析器ClassLoaderTemplateResolver

    在vert.x中使用模板解析,可以为我们带来很多方便.我这里学习了一下ClassLoaderTemplateResolver的简单使用.这次工程配置与上篇一样,不需要做任何多的配置.直接编写代码就可以 ...

随机推荐

  1. 【GPLT】 2018年天梯赛全国总决赛 L2-2 小字辈（c++）

    题目: 这一题并不是很难,属于常规的图论遍历题,这里我是用的bfs(dfs应该也可以,但明显bfs简单一些). 本人写的时候写了很多没必要头文件,自己可以根据内容删去,必要的我会写上注释 如有错误,请 ...

  2. mmdetection 绘制PR曲线

    参考:https://github.com/xuhuasheng/mmdetection_plot_pr_curve 适用于COCO数据集 import os import mmcv import n ...

  3. 0基础学习docker

    进入docker容器命令 docker exec -it 容器id bash 获取镜像 # 1.获取镜像,镜像托管仓库 docker search centos # 查询centos镜像 docker ...

  4. netty系列之:netty中的核心编码器base64

    目录 简介 netty codec的实现逻辑 netty中Base64的实现 netty中的base64编码和解码器 Base64Encoder Base64Decoder 总结 简介 我们知道数据在 ...

  5. 通过命令验证docker容器相当一个轻量级的Linux运行环境，且每个容器内都有一个属于自己的文件系统，容器之间相互隔离

    一.docker的三个重要概念 1.镜像:打包项目带上环境,即镜像 Docker镜像是一个特殊的文件系统,除了提供容器运行时所需的程序.库.资源.配置等文件外,还包含了一些为运行时准备的配置参数.镜像 ...

  6. ReLabel：自动将ImageNet转化成多标签数据集，更准确地有监督训练 | 2021新文

    人工标注数据集中普遍存在噪声,ReLabel能够自动且低成本地将原本的单标签数据集转化为多标签数据集,并且提出配合random crop使用的高效LabelPooling方法,能够更准确地指导分类网络 ...

  7. socket编程实现tcp服务器_C/C++

    1. 需求分析 实现一个回声服务器的C/S(客户端client/服务器server)程序,功能为客户端连接到服务器后,发送一串字符串,服务器接受信息后,返回对应字符串的大写形式给客户端显示. 例如: ...

  8. 2020年DevOps工程师入门指南

    DevOps兴起于2010年代,到现在DevOps已经在行业中拥有了一席之地,并在继续发展壮大. 有兴趣成为一名DevOps工程师吗?如果想要成为一名DevOps工程师,需要做到以下五点: 要有开发者 ...

  9. 图解KMP字符串匹配算法+代码实现

    kmp算法跟之前讲的bm算法思想有一定的相似性.之前提到过,bm算法中有个好后缀的概念,而在kmp中有个好前缀的概念,什么是好前缀,我们先来看下面这个例子. 观察上面这个例子,已经匹配的abcde称为 ...

  10. 结合 Vuex 和 Pinia 做一个适合自己的状态管理 nf-state

    一开始学习了一下 Vuex,感觉比较冗余,就自己做了一个轻量级的状态管理. 后来又学习了 Pinia,于是参考 Pinia 改进了一下自己的状态管理. 结合 Vuex 和 Pinia, 保留需要的功能 ...