VueJs 不显示组件的源代码

Question

我最近开始使用 vueJS2，现在我正在研究组件，我有一个问题要请教专家。

据我所知，VueJS 使用 JavaScript 处理 HTML，正因为如此，其余的 HTML 代码是不可见的。 如果我错了，请纠正我。

在 Chrome 浏览器中查看

在 IDE 中查看

在 Chrome 源代码中查看

可以看到Chrome源码中没有<button>标签

我怎样才能使当我使用组件时，我想完全显示 HTML，例如这里：

我的 jQuery DataTable 的源代码

另一个与主题相关的问题。组件将整个 HTML 缩减为“一行”以便在浏览器中进行搜索是否重要？

Answer 1

您无法在源代码中看到 HTML，因为编译是在源代码生成之后进行的。

但是，您可以在 Chrome 中右键单击您的组件并选择 Inspect。这是有效的，因为elements 选项卡显示了您的代码的实时表示，因此它也显示了已编译的组件标记。

如果您需要更多调试工具，可以查看 Vue devtools Chrome 扩展。

这不像 jQuery 那样工作，因为 Vue 采用 data-driven 方法。您的数据负责您标记的外观。 jQuery 通常会增强已有的 HTML。