W3C验证和Vue的HTML绑定语法

Question

当我用W3C验证器验证我的页面时，遇到了Vue事件和绑定语法的以下错误：

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

有什么方法可以解决这个问题吗？

- PierreB

Answer 1

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

请查看他们的问题为什么不使用HTML5 data-*属性。

似乎可以覆盖使用的前缀，但这个选项似乎已被删除。

- unor

---

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

W3C验证器（以及许多其他用户）不执行JavaScript。 - unor

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

我的理解是指令语法不应该出现在渲染的标记中。因此，在W3C的验证器中复制/粘贴呈现的代码源不应有任何区别，对吗？我还成功地使用一堆jquery代码验证了许多呈现的代码。因此，在编译之前肯定有些我做得不对的地方。 - PierreB

好的，我解决了。我在W3C验证器中复制/粘贴了来自Chrome检查器的渲染HTML，而不是浏览器的源代码。 - PierreB

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

Answer 2

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

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

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

（遗憾的是，某些包装器（如node的html-validator/html-validator-cli和gulp-html）显然仅支持忽略字符串而不是正则表达式。其他一些工具（如grunt-html和html5validator）确实支持它。）

顺便说一下，引号的样式已更改，在旧版本中，它默认使用Unicode智能引号，并且需要调整正则表达式。

- phk