Vue.js - 无编译模板的友好语法

Vue.js是我的案例的理想库，但我在非SPA页面上使用它。Vue.js - 无编译模板的友好语法

有没有办法绕过语法v-bind:click？我想要的属性从data-v-*开始，不包含:。

我的解决方案（基于接受的答案）：

看起来Vue.js不会在这里通过考试。 Knockout被证明是友好SEO html语法的理想库，无需编译模板。

来源

2017-04-13 Jarek

@click不够漂亮吗？ :) –

你能举个例子吗？我们的客户有不同的seo公司，有些需要w3c验证器测试。 “v-bind：click”与xml的clouse不兼容。 – Jarek

只是说@click是v-bind的简写：点击 –

您可以使用script模板从验证器中“隐藏”Vue-HTML。以下验证为HTML5。

<!DOCTYPE html> 
<html> 
<head> 
<title>Whatever</title> 
</head> 
<body> 
<script id="some-template" type="text/template"> 
    <div v-model="foo" v-bind:click="dontCare">Whatever</div> 
</script> 
<some-template id="app"></some-template> 
</body> 
</html>

这是没有那么多作弊的，因为它看起来，由于Vue的-HTML 不 HTML，但实际上是用于生成HTML模板（或者，我觉得更准确，产生DOM）。但从生成的HTML永远不会受到验证器的影响，这是一个完全的欺骗。 :)

另外，你可以看看使用Knockout，它使用纯HTML5（你写的是传递到浏览器）。它不像Vue那么高性能，但它是一个MVVM框架。

来源

2017-04-13 13:17:49

非常感谢！看起来Knockout将通过我们的考试。 – Jarek

简短的回答是：不。

我不认为有一种方法来改变Vue公司的模板。生成的HTML发送给用户将是有效的，因为修饰符（v-for，v-bind等）将被剥离您的HTML。例如，像Angular这样的框架不会去除多个“ng- *”属性。比如，你可以写：

<div v-if="model.length" />

生成的HTML将是：

<div />

这是有效的，并与任何W3C验证兼容。

来源

2017-04-13 11:58:07

我知道这一点，但我无法编译html。 – Jarek

@Jarek很好，很抱歉，我不认为VueJS可以满足您的w3c验证需求。在我看来，SEO公司应该验证输出的HTML。 –

无论如何感谢您的帮助:) – Jarek

Vue.js - 无编译模板的友好语法

回答

相关问题