具有HAML/Jade/Pug样板的VueJS [英] VueJS with HAML/Jade/Pug-like templating

问题描述

我在当前项目中同时使用了Vue.js和 HAML .模板由HAML解析，转换为HTML，然后由Vue解析.例如:

I'm using both Vue.js and HAML in my current project. The templates are parsed by HAML, converted into HTML, then parsed by Vue. For instance:

#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解析器毫发无损，这让人有些不安.

It works ok, but it's a bit disconcerting worrying whether all the Vue syntax will make it unscathed through the HAML parser.

但是我真的很喜欢这种简洁，无尖括号的模板.

But I really like this type of succinct, angle-bracket-less template.

有没有更清洁的方法来实现这一目标? Vue有一些支持类似功能的插件吗?

Is there is a cleaner way to achieve this? Some add-on to Vue that supports something similar?

推荐答案

不用担心.使用预处理器没有错.我的意思是，vue取决于wepback，其中所有内容都以一种或另一种方式进行了预处理.开箱即用，您可以将pug与vue结合使用，因此我对它更加信任.它对我来说很好，没有任何意外的问题.两者都具有通过缩进进行嵌套的共同点，这开始与较长的源代码混淆.因此，我主要在短组件中使用哈巴狗，并使用命名的插槽将它们嵌套到较大的插槽中.

Don't worry to much. There is nothing wrong about using preprocessors. I mean vue depends on wepback where everything is being preprocessed in one way or an other. Out of the box you can use pug with vue so I put more trust in it. It works fine for me without any unexpected problems. Both have the nesting through indentation in common and this is something that starts to be confusing with longer source codes. So I use pug mainly in short components and nest them using named slots into bigger ones.

您的代码-哈巴狗版本(据我所知，这个HAML代码应该做什么)

Your code - pug version (as far I can guess what this HAML code should do)

<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源代码

The whole Vuetifyjs website is made with pug: Vuetifyjs.com Source Code

这篇关于具有HAML/Jade/Pug样板的VueJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！