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. 茴香豆的“茴”有四种写法,Python的格式化字符串也有

    茴香豆的"茴"有四种写法,Python的格式化字符串也有 茴香豆的"茴"有四种写法,Python的格式化字符串也有 被低估的断言 多一个逗号,少一点糟心事 上下 ...

  2. MATLAB地图工具箱学习心得(二)设计可变参数和位置拾取的“放大镜”式投影程序

    最近刚好因为一些原因整理这方面的内容,所以还是把这篇鸽了一年多的博客顺手写出来了∠( ᐛ 」∠)_.因为是当时课程设计的一部分,程序上难免会有一些不足和bug,在这里将设计的思路分享给大家. 本篇博客 ...

  3. Maven基础学习笔记

    Maven基础学习笔记 下载链接 官网:https://maven.apache.org/ 所有版本:https://archive.apache.org/dist/maven/maven-3/ 阿里 ...

  4. 【已解决】vscode窗口控制台闪现(不用更改原代码)

    打开launch.json 将"type": "cppdbg"改为"type": "cppvsdbg" 会出现密钥ext ...

  5. Go语言学习——map

    map 映射关系容器 内部使用散列表(hash)实现 map是引用类型 必须初始化才能使用 无序的基于key-value的数据结构 map定义 map的定义语法: map[KeyType]ValueT ...

  6. 实战|Linux大文件切割

    一个执着于技术的公众号 日常工作中需要对日志文件进行分析,当日志文件过大时,Linux中使用vim.cat.grep.awk等这些工具对大文件日志进行分析将会成为梦魇,具体表现在: 执行速度缓慢,文件 ...

  7. 动手实操丨RC522射频卡模块与IC卡完成充值消费查询的技术实现思路

    摘要:一文手把手教你利用RC522射频卡模块与IC卡完成充值消费查询的技术实现思路. 本文分享自华为云社区<​​​​​​​​​​​​​​RC522射频卡模块与IC卡完成充值消费查询的技术实现思路 ...

  8. .NET性能优化-为结构体数组使用StructLinq

    前言 本系列的主要目的是告诉大家在遇到性能问题时,有哪些方案可以去优化:并不是要求大家一开始就使用这些方案来提升性能. 在之前几篇文章中,有很多网友就有一些非此即彼的观念,在实际中,处处都是开发效率和 ...

  9. C++面向对象-类和对象那些你不知道的细节原理

    一.类和对象.this指针 OOP语言的四大特征是什么? 抽象 封装.隐藏 继承 多态 类体内实现的方法会自动处理为inline函数. 类对象的内存大小之和成员变量有关 类在内存上需要对齐,是为了减轻 ...

  10. arts-week14

    Algorithm 923. 3Sum With Multiplicity - LeetCode Review Building a network attached storage device w ...