VueJS與HAML / Jade / Pug一樣的模板

Question

我在我當前的項目中使用了Vue.js和HAML 。 模板由HAML解析，轉換為HTML，然后由Vue解析。 例如：

#pagecontent.nonscrolling
    %h2 Demand forecasts
    %label{ for:"location-type" } Select location type
    %select.form-control#location-type{ v-model:"locationType" }
        %option{ v-bind:value:"'foo'" } Foo

它工作正常，但令人擔心的是，是否所有Vue語法都會通過HAML解析器使其無損。

但我真的很喜歡這種簡潔，無角度支架的模板。

是否有更清潔的方法來實現這一目標？ Vue的一些附加組件支持類似的東西？

Answer 1

別擔心。 使用預處理器沒有任何問題。 我的意思是vue取決於wepback，其中所有內容都以某種方式進行預處理。 開箱即用你可以使用pug與pue，所以我更加信任它。 它沒有任何意外的問題，對我來說很好。 兩者都有共同的縮進嵌套，這種情況開始與較長的源代碼混淆。 所以我主要在短組件中使用pug，並使用命名槽將它們嵌套到更大的組件中。

你的代碼 - 帕格版（至於我可以猜到這個HAML代碼應該做什么）

<template lang="pug">
#pagecontent.nonscrolling
    h2 Demand forecasts
    label(for="location-type") Select location type
    select.form-control#location-type(v-model="locationType") 
        option(v-bind:value="foo") Foo
</template>

整個Vuetifyjs網站都是用哈巴狗制作的： Vuetifyjs.com源代碼