我同时使用 Vue.js 和HAML https://www.npmjs.com/package/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 与 vue 一起使用,所以我对它更加信任。它对我来说工作得很好,没有任何意外的问题。两者都有通过缩进进行嵌套的共同点,这开始与较长的源代码混淆。因此,我主要在较短的组件中使用 pug,并使用命名插槽将它们嵌套到较大的组件中。
你的代码 - 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网站是用pug制作的:Vuetifyjs.com 源代码 https://github.com/vuetifyjs/vuetify
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)