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扩展程序。

由于Vue采用data-driven方法，因此无法像jQuery那样工作。您的数据负责标记的外观。 jQuery通常会增强已经存在的HTML。