![](/img/trans.png)
[英]In VueJS, is it good practice to have some component templates in HTML and some templates in PUG / Jade?
[英]VueJS with HAML/Jade/Pug-like templating
我在我当前的项目中使用了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的一些附加组件支持类似的东西?
别担心。 使用预处理器没有任何问题。 我的意思是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源代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.