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 - 無編譯模板的友好語法

回答

相關問題