Vue是如何实现双卷/胡子语法的？

Question

像Vue这样的框架是如何在HTML文档中实现自己的自定义语法的？

所以我想要创建一个模板引擎，因此我需要知道如何实现我自己的自定义语法。我认为一个简单的方法是可以在Vue中使用的双curlys。curlys的例子：

<h1>{{pageTitle}}</h1>

我的第一个想法是使用`String.prototype.replaceAll( regex，string)；但是我被困在了我将要使用的正则表达式中。实际上，现在考虑一下，我可能需要一个动态的正则表达式？

    p.replaceAll(/\{\{()\}\}/g, '<p>{{embeddedVar}}</p>')

我考虑的另一个选项是一个解析器，或者一个lexer，但我甚至不知道从哪里开始。我在C++的学校建的。我以为NPM有一个预建的？

似乎有几个开发人员已经编写了自己的自定义模板引擎，该引擎内置了对双花括号的支持。我在想，也许有一种共同的方式来实施它。

Answer 1

浏览器确实不理解Vue语法。这项工作由每个Vue应用程序中导入的Vue库完成。

当页面加载时，甚至可以看到原始标记(出现了大括号)，这是因为Vue还没有一直加载。