javascript - Vue 是如何实现双 curl / mustache 语法的？

Question

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

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

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

我的第一个想法是使用 `String.prototype.replaceAll(regex, string);但我被困在我会使用的正则表达式上。事实上现在想想，我可能需要一个动态正则表达式？

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

我考虑的另一个选择是解析器或词法分析器，但我什至不知道从哪里开始。我在学校用 C++ 构建了它们。我想也许 NPM 有一个预建的？

似乎有几个开发人员编写了他们自己的自定义模板引擎，该引擎内置了对双大括号 的支持。我在想，也许有一种通用的实现方式。

Answer 1

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

原始标记(显示花括号)甚至可以在页面加载时看到一瞬间，这是因为 Vue 尚未完全加载。