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 Source Code

VueJS与HAML / Jade / Pug一样的模板

1 个答案: