[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的理解了；
希望理解了这个技术，你可以在其他语言同样可以用到它！

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家发表自己的见解

主目录

与歌谣一起通关前端面试题