mustcache

什么是模板引擎

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

数据

  1. [
  2.   {"name":"小明","age":12,"sex":"男"}，
  3.   {"name":"小红"，"age":11,"sex":"女"},
  4.   {"name":"小强","age":13,"sex":"男"}
  5. ]

视图

  1. <ul>
  2.   <li>
  3.     <div class = "hd">小明的基本信息</div>
  4.     <div class= "bd">
  5.       <p>姓名:小明</p>
  6.       <p>年龄:12</p>
  7.       <p>性别:男</p>
  8.     </div>
  9.   </li>
  10.   <li>
  11.     <div class = "hd">小红的基本信息</div>
  12.     <div class= "bd">
  13.       <p>姓名:小红</p>
  14.       <p>年龄:11</p>
  15.       <p>性别:男</p>
  16.     </div>
  17.   </li>
  18. </ul>

如何将数据转变为视图

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

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

纯DOM

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>模板引擎-纯dom</title>
  9. </head>
  11. <body>
  12.     <ul id="list">
  14.     </ul>
  16.     <script>
  17.         var arr = [
  18.             { "name": "小明", "age": 12, "sex": "男" },
  19.             { "name": "小红", "age": 12, "sex": "女" },
  20.             { "name": "小强", "age": 11, "sex": "男" }
  21.         ];
  22.         var list = document.getElementById('list');
  23.         for (var i = 0; i < arr.length; i++) {
  24.             //每遍历一项。都要用DOM方法创建li标签
  25.             let oLi = document.createElement('li');
  27.             // 创建hd这个div
  28.             let hdDiv = document.createElement('li');
  29.             hdDiv.className = 'hd';
  30.             hdDiv.innerText = arr[i].name + '的基本信息';
  32.             oLi.appendChild(hdDiv);
  33.             // 创建bd这个div
  34.             let bdDiv = document.createElement('div');
  35.             bdDiv.className = 'bd';
  36.             // 创建3个p
  37.             let p1 = document.createElement('p');
  38.             p1.innerText = '姓名:' + arr[i].name;
  39.             bdDiv.appendChild(p1);
  40.             let p2 = document.createElement('p');
  41.             p2.innerText = '年龄:' + arr[i].age;
  42.             bdDiv.appendChild(p2);
  43.             let p3 = document.createElement('p');
  44.             p3.innerText = '性别:' + arr[i].sex;
  45.             bdDiv.appendChild(p3);
  46.             oLi.appendChild(bdDiv)
  48.             //创建的节点是孤儿节点，所以必须上树才能被用户看见
  49.             list.appendChild(oLi);
  50.         }
  52.     </script>
  54. </body>
  56. </html>

数组join法

简单演示

  1. <body>
  3. </body>
  4. <script>
  5.     var str1 = ['a',
  6.         'b',
  7.         'c',
  8.         'd',].join('');
  9.     var str2 = [
  10.         '<li>',
  11.         ' <div class = "hd">小明的基本信息</div>',
  12.         ' <div class= "bd">',
  13.         '   <p>姓名:小明</p>',
  14.         '   <p>年龄:12</p>',
  15.         '   <p>性别:男</p>',
  16.         ' </div>',
  17.         '/li>',
  18.     ].join('')
  19.     console.log(str1,str2)
  20. </script>
  22. </html>

将数据转化为视图代码

  1. <body>
  3.     <ul id="list">
  5.     </ul>
  6. </body>
  7. <script>
  8.     var arr = [
  9.         { "name": "小明", "age": 12, "sex": "男" },
  10.         { "name": "小红", "age": 12, "sex": "女" },
  11.         { "name": "小强", "age": 11, "sex": "男" }
  12.     ];
  13.     // 遍历arr 数组，每遍历一项，就以字符串的视角
  14.     for (let i = 0; i < arr.length; i++) {
  15.         list.innerHTML += [
  16.             '<li>',
  17.             ' <div class = "hd">' + arr[i].name + '的基本信息</div>',
  18.             ' <div class= "bd">',
  19.             '   <p>姓名:' + arr[i].name + '</p>',
  20.             '   <p>年龄:' + arr[i].age + '</p>',
  21.             '   <p>性别:' + arr[i].sex + '</p>',
  22.             ' </div>',
  23.             '</li>',
  24.         ].join('')
  26.     }
  27. </script>
  29. </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. 关于Jupyter Notebook无法自动补全（Autocompletion），报错TypeError: __init__() got an unexpected keyword argument 'column' 的解决方案

    关于Jupyter Notebook无法自动补全(Autocompletion),报错TypeError: __init__() got an unexpected keyword argument ...

  2. 初始celery

    使用celery执行异步任务 下载celery,redis pip3 install celery#在这里我使用的是celery==4.2.2#当celery版本过低的话celery配置可能会略有不同 ...

  3. 修改本地仓库Maven，设置镜像

    修改本地仓库的位置: 先建立 文件路径: 进入文件夹目录: 就可以看到一个配置文件夹 就在里面修改本地仓库的路径,设置阿里云镜像 添加本地阿里云镜像: 如下图: 内容如下: <mirror> ...

  4. 【PyTorch】常用的神经网络层汇总（持续补充更新）

    1. Convolution Layers 1.1 nn.Conv2d (1)原型 torch.nn.Conv2d(in_channels, out_channels, kernel_size, st ...

  5. 虚拟机（Vmvare）与配置，得到一台学习机

    准备: 1.Vmvare 2.CentOS7.4镜像 安装与配置操作系统: 1.配置虚拟机上网 2.配置静态ip地址 开始安装 1. 2.直接下一步选择我们准备好的镜像,然后下一步 3.修改虚拟机的名 ...

  6. 基本命令学习 -（3）Linux压缩和解压缩命令汇总

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 前言 Linux下的压缩和解压缩工具比较多,有时经常记不住,这里给大家汇总一下,方便大家查阅. ...

  7. 利用expect批量修改Linux服务器密码

    一个执着于技术的公众号 背景 修改Linux系统密码,执行passwd即可更改密码.可如果有成千上百台服务器呢,通过ssh的方式逐一进行修改,对我们来说,工作量是非常大,且效率非常低下.因此采用批量修 ...

  8. vue - Vue组件化编程

    今天是对vue组件化的一个理解,最主要的单文件组件,然后就可以脚手架的学习了,本来昨晚就该上传的,但是用的那个上传博客园的Python脚本不行了,换了一个新的. 组件化让我越来越感觉到框架的力量了 一 ...

  9. Ruby 趣学笔记（一）

    Ruby 趣学笔记(一) 本文写于 2020 年 5 月 6 日 Ruby 趣学笔记(一) 变量 变量声明 变量类型 常量 输出 字符串 字符串操作 Array 数组的遍历 数组的连接 怎么判断该变量 ...

  10. 6┃音视频直播系统之 WebRTC 核心驱动SDP规范协商

    一.什么是SDP SDP(Session Description Protocal)其实就是当数据过来时候,告诉数据自己这里支持的解码方式.传输协议等等,这样数据才能根据正确的方式进行解码使用 SDP ...