vue2.x---mustache模板引擎学习记录_vue2的模板引擎-程序员宅基地
mustache模板引擎
1.什么是模板引擎
模板引擎是将数据要变为视图最优雅的解决方案
数据变为视图的方法
1.纯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>Document</title>
</head>
<body>
<ul id="list"></ul>
<script>
let arr = [
{
"name":'小明','age':12,'sex':'男'},
{
"name":'小红','age':11,'sex':'女'},
{
"name":'小强','age':13,'sex':'男'},
]
const list = document.querySelector('#list')
for(let i = 0; i < arr.length; i++){
// 每遍历一遍都要用Dom方法去创建li标签
let lis = document.createElement('li')
// 创建hd这个div
let hdDiv = document.createElement('div');
hdDiv.className = 'hd'
hdDiv.innerText = arr[i].name + '的基本信息'
// 创建bd这个div
let bdDiv = document.createElement('div');
bdDiv.className = 'bd'
// 创建三个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)
// 创建出来的是孤儿节点，上树后才能被看见
lis.appendChild(hdDiv)
lis.appendChild(bdDiv)
list.appendChild(lis)
}
</script>
</body>
</html>
2.数组join法(曾经非常流行)
实现代码：
<!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>Document</title>
</head>
<body>
<ul id="list"></ul>
<script>
let arr = [
{
"name":'小明','age':12,'sex':'男'},
{
"name":'小红','age':11,'sex':'女'},
{
"name":'小强','age':13,'sex':'男'},
]
const list = document.querySelector('#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('')
}
// let str = [
// '<li>',
// ' <div class="hd"></div>',
// ' <div class="bd">',
// ' <p>姓名：</p>',
// ' <p>年龄：</p>',
// ' <p>性别</p>',
// ' </div>',
// '</li>'
// ].join('')
console.log(str);
</script>
</body>
</html>
3.es6模板字符串法(ES6中新增的${a}语法糖，很好用)
实现代码：
<!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>模板字符串法</title>
</head>
<body>
<ul id="list"></ul>
<script>
let arr = [
{
"name":'小明','age':12,'sex':'男'},
{
"name":'小红','age':11,'sex':'女'},
{
"name":'小强','age':13,'sex':'男'},
]
const list = document.querySelector('#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>
4.模板引擎(解决数据变为视图最优雅的方法)
2.mustache基本使用
- mustache官方git: https://github.com/janl/mustache.js
- mustache是"胡子"的意思，因为它的嵌入标记{ { }}非常像胡子
- { { }} 的语法也被Vue沿用
- mustache是最早的模板引擎库，比Vue诞生早的多，它的底层实现机理在当时是非常有创造性、轰动性的，为后续模板引擎的发展提供了崭新的思路
- 首先要引入mustache库(本文是4.0.1版本)，可以在bootcdn.com上找到它
- mustache的模板语法非常简单，比如前述案例的模板语法如下:
1.循环对象数组：
<ul>
{
{#arr}}
<li>
<div class="hd">{
{name}}的信息</div>
<div class="bd">
<p>姓名：{
{name}}</p>
<p>年龄：{
{age}}</p>
<p>性别: {
{sex}}</p>
</div>
</li>
{
{/arr}}
</ul>
2.不循环：
<!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>Document</title>
</head>
<body>
<div id="container"></div>
<script src="./jslib/mustache.js"></script>
<script>
let templateStr = `
<h1>我买了一个{
{phone}}手机,心情:{
{mood}}</h1>
`
let data = {
phone:'华为',
mood:'开心'
}
let domStr = Mustache.render(templateStr,data)
let container = document.querySelector('#container')
container.innerHTML = domStr
console.log(domStr);
</script>
</body>
</html>
3.循环简单数组
4.数组嵌套
5.布尔值
注：不使用模板字符串
<!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>Document</title>
</head>
<body>
<div id="container"></div>
<script src="./jslib/mustache.js"></script>
<!-- 模板 -->
<script type="text/template" id="template">
<ul>
{
{
#arr}}
<li>
<div class="hd">{
{
name}}的信息</div>
<div class="bd">
<p>姓名：{
{
name}}</p>
<p>年龄：{
{
age}}</p>
<p>性别: {
{
sex}}</p>
</div>
</li>
{
{
/arr}}
</ul>
</script>
<script>
let templateStr = document.getElementById('template').innerHTML
let data = {
arr:[
{
"name":'小明','age':12,'sex':'男'},
{
"name":'小红','age':11,'sex':'女'},
{
"name":'小强','age':13,'sex':'男'},
]
}
let domStr = Mustache.render(templateStr,data)
let container = document.querySelector('#container')
container.innerHTML = domStr
console.log(domStr);
</script>
</body>
</html>
3.mustache底层核心机理
1.mustache库不能用简单的正则表达式思路实现
<!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>Document</title>
</head>
<body>
<div id="container"></div>
<script src="./jslib/mustache.js"></script>
<script>
let templateStr = `
<h1>我买了一个{
{phone}},我心情很{
{mood}}</h1>
`
let data = {
phone:'xxx',
mood:'开心'
}
// let domStr = Mustache.render(templateStr,data)
let domStr = render(templateStr,data)
let container = document.querySelector('#container')
container.innerHTML = domStr
//最简单的模板引擎的实现机理，利用的是正则表达式中的replace()方法。
//replace()的第二个参数可以是一个函数，这个函数提供捕获的东西的参数，就是$1
//结合data对象，即可进行智能的替换
function render(templateStr,data){
return templateStr.replace(/\{\{(\w+)\}\}/g,function(findStr,$1){
return data[$1]
})
}
// replace有四个参数
// a参数//匹配的位置 {
{xxx}}
// b参数//捕获的
// c参数//位置
// d/源字符串
</script>
</body>
</html>
3.mustache库实现机理
什么是tokens?
- tokens是一个js的嵌套数组，就是模板字符串的JS表示
- 它是 “抽象语法树”、“虚拟节点” 等等的开山鼻祖
模板字符串：<h1>我买了一个{ {thing}},好{ {mood}}啊</h1>
tokens:
[
["text","<h1>我买了一个"]，
["name","thing"]，
["text","，好"]，
["name","mood"]，
["text","啊<h1>"]，
]
4.mustache手写实现
xxx待更新
智能推荐
类的理解_程序中对类的理解-程序员宅基地
文章浏览阅读840次。1. 类的定义具有同种属性的对象称为类，是个抽象的概念。2. 类的组成类由公有和私有两部分组成。公有部分主要是成员函数，私有部分是一般数据。class<类名>{ public: 公有段数据成员和成员函数; protected: 保护段数据成员和成员函数; };class<类名>{ public: 公有段数据成员和成员函数; protected: ..._程序中对类的理解
黑客自建恶意软件测试免杀平台和出售代码加密服务被捕-程序员宅基地
文章浏览阅读289次。对于恶意软件来说，杀毒软件是其在攻击目标系统中成功落地并执行的第一大阻碍。因此一些恶意软件制作者为了绕过杀毒软件的查杀，会首先将恶意软件在运行着杀毒软件的系统中运行，用于测试是否免杀。像..._在线免杀平台
C/C+小记-程序员宅基地
文章浏览阅读8.7k次。0、基本知识基本数据类型char、short( int)、int、long( int)、long long (int)、float、double、long doulbe，括号内内容表示可省略。除了上述几种外，前5中还有对应的unsigned类型。3u、3ul、1.2f、1.2L。常量：整型常量、浮点型常量、符号常量（用#define定义）、字符常量、字符串常量、枚举常量字符常量..._(date[1]>>8)&0x01
电容的偏压效应_电容直流偏压特性-程序员宅基地
文章浏览阅读4.1k次，点赞3次，收藏27次。1、偏压效应：施加直流电压后，导致电容值变小的特性。I类陶瓷（COG）的电容的偏压效应较弱，II类陶瓷(X7R/X5R/Y5V)的电容的偏压效应较强。而且厂家一般会给出偏压特性曲线（C-U曲线）。在电源电路设计中，要充分考虑。注 ：I类电容指低介电常数电容（ε较小）；II类电容指高介电常数电容（ε较大）2、 偏压效应原因：：以下是我对偏压效应的理解：由于极化分子的正负电荷中心不重合，所以在电子的随机运动下，极化分子的极化强度矢量为0，极化强度指的是电偶极矩的矢量和（方向：由负电荷指向正电荷，方向_电容直流偏压特性
cRARk的使用-程序员宅基地
文章浏览阅读3.4w次，点赞10次，收藏11次。cRARk的使用工具下载crark.rarGUI.execRARkGUI可视化界面处理的过程注：之前自己压缩的一些文件，设置了密码；现在密码忘记了，但那些文件还蛮重要，所以想使用cRARk工具进行破解自己的密码。这个博客也是为了方便之后使用，万一下一次又忘记密码了！！！大家要正确使用该工具！！！..._crark
vue页面中嵌入iframe 监听iframe 中事件_前端 vue iframe 打开一个pdf 如何监听打印事件-程序员宅基地
文章浏览阅读9.4k次。//vue组件中是个弹框<template> <el-dialog title="编辑" :visible.sync="editDialog" center :fullscreen="true" append-to-body v-loading="loading"> <iframe :src="iframeurl" frameborder="0" style="width:100%;" :height="height"></iframe> &_前端 vue iframe 打开一个pdf 如何监听打印事件
随便推点
VS2013 调试时的 0xCCCCCCCC 读取字符串的字符时出错_0vssaaa jlsxcccc-程序员宅基地
文章浏览阅读3.3k次。0xcccccccc : Used by Microsoft's C++ debugging runtime library to mark uninitialised stack memory0xcdcdcdcd : Used by Microsoft's C++ debugging runtime library to mark uninitialised heap memory0xfee..._0vssaaa jlsxcccc
推动Windows的限制：USER和GDI对象 - 第1部分_win10单个进程 用户对象数量限制-程序员宅基地
文章浏览阅读1.2k次。到目前为止，在“推动Windows系列的极限”中，我主要关注由Windows操作系统内核管理的资源，包括物理和虚拟内存，分页和非分页池，进程，线程和句柄。然而，在本文和下一篇文章中，我将探索Windows窗口管理器USER和GDI对象管理的两个资源，这些资源表示窗口元素（如窗口和菜单）和图形构造（如钢笔，画笔和绘图表面）。就像我在之前的文章中讨论的其他资源一样，耗尽各种USER和GDI资源限制可能..._win10单个进程 用户对象数量限制
在eclipse中配置Tomcat并实现第一个servlet程序_eclipse下新建一个web工程,写两个servlet程序,分别继承父类和实现接口,并用浏览器-程序员宅基地
文章浏览阅读2.3k次，点赞6次，收藏37次。文章目录任务目标一、eclipse中配置Tomcat实现步骤二、实现一个servlet程序新建1.创建servlet文件2.查找servlet的JAR包3.创建web.xml文件4.运行服务器，查看效果任务目标eclipse作为一款强大的软件集成开发工具，对web服务器提供了非常好的支持，他可以集成各种web服务器，方便程序员进行web开发。通过本任务，读者将学会如何在eclipse工具中配置Tomcat。并实现一个简单的servlet程序。一、eclipse中配置Tomcat实现步骤1.下载并_eclipse下新建一个web工程,写两个servlet程序,分别继承父类和实现接口,并用浏览器
kettle连接数据库sqlserver、MySQL、Hadoop等_kettle9 连接sqlserver2019驱动-程序员宅基地
文章浏览阅读2.2k次。一.注意（1）kettle支持连接关系型数据库和hive、impala等大数据组件。如果要连接数据库，底层kettle的目录下应该安装对应的驱动jar包，否则会报缺少驱动错误。例如：连接mysql5.7，要事先下载mysql的jdbc驱动包，所以我们要下载该jar包 （jar包下载详见附录）下载好后，解压该文件将文件夹中的mysql-connector-java-5.1.48-bin.jar文件复制到kettle所安装的data-integration\lib下即可。驱动下载地址：https:_kettle9 连接sqlserver2019驱动
Numpy : np.prod_np.prod keepdims-程序员宅基地
文章浏览阅读3.9k次。返回给定维度上各个元素的乘积numpy.prod(a,axis=None,dtype=None,out=None,keepdims=<no value>,initial=<no value>)axis是指求积的维度keepdims是指保持维度，不缩减initial是起始数，即返回的矩阵会在元素乘积上再乘起始数>>> np.p..._np.prod keepdims
linux批量杀进程_[Linux]使用awk批量杀进程的命令-程序员宅基地
文章浏览阅读576次。碰到需要杀掉某一类进程的时候，如何批量杀掉这些进程，使用awk命令是很好的选择。ps -ef|grep aaa|grep -v grep|awk '{print "kill -9 " $2}' |sh1.ps -ef|grepaaa|grep-vgrep这是大家很熟悉的命令，这里就不再多说，就是从当前系统运行的进程的进程名中包含aaa关键字的进程。2. 后面部分就是awk命令了，一般aw..._"ps -aux |egrep \"miascoreserver\" | awk '{print $2}' | xargs kill -9 >/dev/nul"