Jak skomentować kod w pliku vue.js?

98

Muszę wstawić komentarz do pliku vue.js, aby móc się do niego odwołać w przyszłości, ale nie mogę znaleźć w dokumentacji, jak to zrobić.

Próbowałem //, /**/, {{-- --}}, i {# #}, ale żaden z nich nie wydają się działać.

Używam ostrza Laravela. Więc to jest sample_file.vue:

<template>
    <div class="media">

        <like-button :post="post" v-if="post.likedByCurrentUser === false && "></like-button>  {{--I want to comment this but I get an error from the gulp watch: post.canBeLikedByCurrentUser === true--}}

        <div class="media-left">
            <a href="#">
                <img class="media-object" v-bind:src="post.user.avatar" v-bind:title="post.user.name + ' image from Gravatar'">
            </a>
        </div>
        <div class="media-body">
            <strong>{{ post.user.name }}</strong>
            <p>{{post.body}}</p>
            <p>{{post.likeCount}} {{ pluralize('like', post.likeCount) }}</p>
        </div>
    </div>
</template> 

Czy ktoś wie, jak wstawić komentarz i / lub jak komentować fragmenty kodu?

Pathros
źródło
1
Jeśli szukasz multi-line komentowania, a średnia komentarz html będzie działać: <!-- -->. Ale wygląda na to, że szukasz komentarzy w tekście?
Adam
Ach, zapomniałem tego spróbować. To jest rzeczywiście HTMLkod! Thnx
Pathros
1
Domyślnie komentarze HTML są usuwane przez vue vuejs.org/v2/api/#comments
Mike3355
1
Składnia szablonów Vue jest bardzo podobna do Handlebars . Warto zauważyć, że kierownica umożliwia {{! comments like this }}i {{!-- comments {{like this}} that can contain double-braces --}}. Nie są one renderowane w wyniku, w przeciwieństwie <!-- html comments -->do tego. Wypróbowałem oba {{! ... }}i {{!-- ... --}}z Vue i niestety nie są obsługiwane. Czy rozważyłbyś dodanie ich do pytania dla użytkowników, którzy się na nie natkną?
chharvey

Odpowiedzi:

174

W <template>swojej sytuacji chciałbyś użyć standardowych komentarzy HTML w tagu. Zostaną również usunięte z wyjścia, co jest miłe.

<!-- Comment -->
Bill Criswell
źródło
1
Afaict, nie są rozebrani w Vue 3 🤷
dtk
Tak, to
psuje
32

Jak powiedział Bill Criswell, możemy używać składni komentarzy HTML.

<!-- Comment -->

Ale będzie działać również poza tagiem szablonu, comment.vue

<!-- Testing comments, this will work too. -->

<template>
    <!-- This will work too -->

    <div>
        <!-- Html Comments -->
        Hello There!
    </div>
</template>

<style><style>

<!-- Commenting here -->

<script>
    // Commenting only 1 line

    /**
      * Commenting multiple lines
      * Commenting multiple lines
      */
</script>
Vaisakh Rajagopal
źródło
1
Powoduje to „Nieoczekiwany token (1: 1)” w Vue 2.5.13.
Alen Siljak
Kiedyś komentowałem poza obsługiwanymi tagami głównymi i stwierdziłem, że powoduje to problemy w zależności od treści komentarzy. Żałuję, że vue obsługuje komentarze poza tagami głównymi, ponieważ jest to najbardziej rozsądne miejsce do tworzenia plików README i tym podobnych, ale cóż.
aaaaaa
Zamiast używać komentarzy poza obsługiwanymi kartami głównymi, użyj tam prawidłowych tagów. <comment>Commenting here</comment. Będziesz musiał dodać je do konfiguracji swojego webpacka. vue-loader.vuejs.org/guide/custom-blocks.html#example
David R.,
18

Właśnie to przetestowałem:

<template>
    {{ /* this is a comment */ }}
    <h1>Hello world</h1>
</template>
Fulldump
źródło
2
Fajnie, nie pojawia się na wyjściu HTML. Ale ta składnia obsługuje tylko komentarze jednowierszowe.
d9k
Niestety nie mogę tego uruchomić:Error parsing JavaScript expression: Unexpected token (1:24)
dtk
9

Zauważyłem, że nie możesz komentować, gdy jesteś wewnątrz tagu:

<!-- make sure it is outside a tag -->

<autocomplete
<!-- you can't place the comment out in here -->
>
</autocomplete>
Juan Vaca
źródło
6

Jeśli jest to przydatne w twoich projektach, możesz umieścić zwykły tekst nad szablonem bez ozdób. Jest całkowicie ignorowany podczas renderowania komponentu.

This is some documentation about this component
   - some
   - info
<template></template>
<script></script>
<style></style>
Rory Jarrard
źródło
4

Vue Styleguidist zawiera najlepsze praktyki i pokazuje przykłady komentowania komponentów. https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

Ale generalnie...

W szablonie lub sekcji HTML użyj komentarzy HTML

<!-- Comment -->

W sekcji skryptów użyj komentarzy Javascript

// Comment
/* Comment */

W stylu komentarze użycie sekcja CSS

/* comment */
ScottyG
źródło
0

Poniższa wskazówka nie dotyczy komentowania (co dokumentowania) kodu jako , ale raczej umożliwienia tymczasowego pominięcia fragmentów kodu podczas programowania.

Gdy komentarze wymagają otwierania i zamykania tagów, sposób, w jaki parser je dopasowuje, może być niewygodny. Na przykład następujące

<!-- I want to comment this <!-- this --> and that --> 

wyjdzie and that -->. Podobnie /* this will be commented /* and so will this */ but not this */.

Moim rozwiązaniem jest użycie v-if="false"do określenia, które bloki chcę (tymczasowo) pominąć.

<template>
<div>
    Hello
    <div v-if="false">
        Vue will not process whatever's in here.
    </div>
    World!
</div>
</template>

Zauważ, że nie powinno to zastępować odpowiednich komentarzy do udokumentowania twojego kodu. To po prostu wygodny sposób na większą kontrolę nad blokami, które chcesz pominąć podczas tworzenia.

Michael Ekoka
źródło
-2

Jestem noobem w Vue.js, ale //powinienem działać, ponieważ i tak kod jest javascript. Patrząc w dokumentach, znajduję ten przykład . Jeśli spojrzysz na pierwsze 2 wiersze javascript, zobaczysz komentarze z //.

przykład w połączonym pliku javascript:

// Full spec-compliant TodoMVC with localStorage persistence
// and hash-based routing in ~120 effective lines of JavaScript.

...
Juan
źródło
1
Jednak to nie działa wewnątrz templatetagu, ale wewnątrz scripttagu
Pavindu