Vue模板解析
2024-10-21 06:06:03
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开发环境
最新文章
- paper
- iOS 7 UI Transition – Porting View Controller Layouts from iOS 6
- Windows系统安装Oracle 11g数据库
- HTML字符实体
- 淘宝的ip地址库
- 获取GridView的BoundField值
- Mac OS X 10.10(yosemite)更新后,cocoapods出错, 及cocoapods更新至0.34后, 错误情况整理
- 字符串(后缀数组):HAOI2016 找相同子串
- Formiko总结整数十进制转换二进制原理
- J.U.C CAS
- 基于IPv6的数据包分析(第三组)
- css简单的一些基础知识
- 彻底卸载Xubuntu Kubuntu
- 【XSY2190】Alice and Bob VI 树形DP 树剖
- 使用Python爬取代理ip
- .Net Core 部署到Ubuntu 16.04 中的步骤
- 装了as之后提示NO JVM installation found.....
- Linux shell 将字符串分割成数组
- Python3中遇到UnicodeEncodeError: &#39;ascii&#39; codec can&#39;t encode characters in ordinal not in range(128)
- word技巧-文本转化表格