vue 不进行html转义_前端高手之路 实现Vue模板解析器

点击右上角的关注，不定期前端干货分享！！

任务事物都自己的特性，同理任何一门开发语言都有自己的语法，对应的任意一个框架也会有自己的一套语法。 不管是学编程语言或是框架。就是要遵循它的规则。今天我们来说说

【Vue】的模板字符串

{ {msg}}

{ {date}}

写过Vue代码的对上面的代码应该很熟悉了，但是童鞋们是否想过这种功能是如何实现的呢？往下看。来，一起撸吧。

这个{ {msg}}就是我们今天要说的模板字符串。很明显，它是通过{ {}}双花括号包裹起来的 。我们的目的就是要找到双花括号中间的内容。接触过angularjs1.x的童鞋对这个应该不陌生吧。要解析得到html当中的文本，很容易就让我们想到用正则表达式了。

分析：

1、获取到#app下面所有的节点。

2、编译。 判断节点的类型(分文本节点和标签节点两大部分)。

3、如果是标签节点，就递归调用

4、通过匹配到的字符串去data对象中替换对应的值即可。

可能会遇到的问题

1、正则表达式要怎么写？正则可谓是很多前端开发者的一大痛点了。不要方，一步步的来，先来个简单的，先匹配前后的双花括号

var re