[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗？说说你对这模板引擎的理解
模板引擎：
负责组装数据，以另外一种形式或外观展现数据。
优点：
可维护性（后期改起来方便）；
可扩展性（想要增加功能，增加需求方便）；
开发效率提高（程序逻辑组织更好，调试方便）；
看起来舒服（不容易写错）
解答
git地址： https://github.com/janl/mustache.js
模板引擎技术是非常有用的，所以它不是一个冷门的知识，反而是需要我们去了解的；
所以我们通过github的安装指令，一步一步的来实现基本的api
我搜查了很多资料，网上并没有一个使用npm包的方式来做demo，都是使用render来执行渲染，鉴于我们日常工作中使用npm比较多，我做一版npm的demo
首先npm init初始化一个空项目；
然后安装mustache
npm i mustache -s -d
在package.json中填写如下内容：
"scripts": {
"build": "mustache dataView.json myTemplate.mustache>public/output.html",
},
如同这个指示看到的一样，我们需要创建一个json文件，这个文件就是变量配置文件，还需要创建一个模板文件，这个模板文件相当于执行render函数的文件，这种方式更加一目了然；
我们创建它们，我使用了vscode，并且装了相关的mustache的插件，所以语法会有提示；
我们首先在json文件中写入一个对象，里面写一个值，然后在模板文件中使用{{}}来执行渲染；
然后执行
npm run build
就会发现在public下面生成了一个html文件，如果报错，说明你的文件目录跟我的不一样
我们在json文件中，写入了这么多值，有普通的值，有布尔值，有数组等等
"age": "19",
"html": "<p>123</p>",
"isTrue": true,
"thisIsObject": {
"name": "shenhao",
"age": "19"
},
"isArray": [{
"name" : "shenhao"
},{
"name" : "shenhao"
},{
"name" : "shenhao"
}]
}
我们在模板中写出了这些代码，我在模板中写了一个简单的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{{name}} 有一个 {{&html}}
<br>
<hr>
{{thisIsObject.name}} {{thisIsObject.age}}
<br>
<hr>
-webkit- {{#isTrue}} 如果是真就显示了 {{/isTrue}}
<br>
<hr>
循环一下下面的内容, 如果是数组，可以用.来表示循环的每一个元素
{{#isArray}} {{name}} {{/isArray}}
<br>
<hr>
{{!^}}与{{!#}}相反，如果变量是null、undefined、 false、和空数组讲输出结果
</body>
</html>
我们来讲解一下基本的api
{{name}}：会在json中查询对应的值，并且渲染
{{&html}}: html在json中如果式一个html标签，可以用这样的方式进行转义 (类似vue中的v-html)
{{#boolean}} 和 {{/boolean}}: 是一个组合，如果boolean为真那么它们之间的内容会渲染，否则不会
{{^boolean}}: 和上面用法一样，只不过是上面的else
{{object.name}}: 同样支持对象键值对的方式获取
{{#array}} 和 {{/array}}: 如果这样写是一个数组，那么不仅有判断boolean的真假，它会迭代中间可以写迭代中的每一个元素，每一个元素可以用{{.}}来获取，如果要获取迭代中的内容是一个键值对，那么可以直接使用{{name}}
这就是mustache简单的用法，上面有demo，你们可以对着demo敲一遍就能非常easy的理解了；
希望理解了这个技术，你可以在其他语言同样可以用到它！
个人简介
我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家发表自己的见解
浙公网安备 33010602011771号