W3C 验证和 Vue 的 HTML 绑定语法

Posted 2023-02-22

【中文标题】W3C 验证和 Vue 的 HTML 绑定语法

【英文标题】：W3C Validation and Vue's HTML binding syntax

【发布时间】：2017-01-22 17:27:49

【问题描述】：

当我使用 W3C 验证器验证我的页面时，我在 Vue 的事件和绑定语法中收到此错误：

错误：此时元素 div 上不允许使用属性 v-on:click。

有没有办法解决这个问题？

【参考方案1】：

您可以创建一个特定的正则表达式来忽略由 vue.js 使用引起的错误：

Attribute "((v-|:)[^"]+|@click)" not allowed

此正则表达式可以以不同的方式使用，具体取决于您验证项目的准确程度。例如，如果您使用的是 CLI 版本的 vnu.jar，您可以将其放入文件中并使用 --filterfile LIST_OF_REGEXES.txt 选项。或者，如果您要设置自己的 vnu.jar 服务器，则可以使用 -Dnu.validator.servlet.filterfile=LIST_OF_REGEXES.txt。

（可悲的是，一些包装器，例如html-validator/html-validator-cli for node 和gulp-html 显然只支持忽略字符串而不是正则表达式。其他诸如grunt-html 和html5validator 所以支持它。 )

顺便说一句，引号的样式发生了变化，在旧版本中，默认情况下它会使用 unicode 智能引号，并且需要调整正则表达式。

【参考方案2】：

理想情况下，他们会支持使用data-* attributes，例如data-v-on:click，但似乎他们不支持。

查看他们的问题Why not using HTML5 data-* attributes。

看来overwrite the used prefix是可以的，但是这个选项seems to have been removed。

【讨论】：

感谢您的链接。根据作者的说法，“Vue 指令在呈现的标记中被删除，因此您的最终标记将符合 W3C。”现在我必须弄清楚为什么在验证文档时它实际上会呈现。

@PierreB：W3C 验证器（以及许多其他消费者）不执行 javascript。

我使用了 Chrome 的“验证”插件，还通过复制/粘贴浏览器的 html 源代码使用了 W3C 在线验证器。该页面还使用 razor 模板引擎在 ASP.net MVC 中呈现，其中我包含 Vue.js 代码。我想知道这里是否有线索......

好的，我想通了。我在 W3C 验证器中复制/粘贴了来自 Chrome 检查器而不是浏览器源的渲染 HTML。

@PierreB 这不会显示未关闭的元素...浏览器通常会修复代码错误...