Jak skomentować kod w pliku vue.js?

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?

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

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>

Właśnie to przetestowałem:

<template>
    {{ /* this is a comment */ }}
    <h1>Hello world</h1>
</template>

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>

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>

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 */

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.

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.

...