¿Cómo comentar el código en un archivo vue.js?

Tengo la necesidad de insertar un comentario dentro de un archivo vue.js para futuras referencias, pero no encuentro cómo hacer esto en los documentos.

He tratado //, /**/, {{-- --}}, y {# #}, pero ninguno de ellos parece funcionar.

Estoy usando la espada de Laravel. Entonces este es el 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> 

¿Alguien sabe cómo insertar un comentario y / o cómo comentar fragmentos de código?

Desea utilizar comentarios HTML estándar en la <template>etiqueta en su situación. También se eliminarán de la salida, lo cual es bueno.

<!-- Comment -->

Como dijo Bill Criswell, podemos usar la sintaxis de comentarios HTML.

<!-- Comment -->

Pero también funcionará fuera de la etiqueta de plantilla, 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>

Acabo de probar esto:

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

Noté que no puedes comentar cuando estás dentro de una etiqueta:

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

<autocomplete
<!-- you can't place the comment out in here -->
>
</autocomplete>

Vue Styleguidist contiene las mejores prácticas y muestra ejemplos de cómo comentar sus componentes. https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

Pero en general...

En la sección de plantilla o HTML use comentarios HTML

<!-- Comment -->

En la sección de script , use comentarios de Javascript

// Comment
/* Comment */

En la sección de estilo , use comentarios CSS

/* comment */

Si es útil para sus proyectos, puede poner texto sin formato encima de la plantilla sin adornos. Se ignora por completo cuando renderiza su componente.

This is some documentation about this component
   - some
   - info
<template></template>
<script></script>
<style></style>

El siguiente consejo no se trata tanto de comentar (como de documentar) el código en sí, sino de permitirle omitir temporalmente fragmentos de código durante el desarrollo.

Cuando los comentarios requieren etiquetas de apertura y cierre, la forma en que el analizador las compara puede ser inconveniente. Por ejemplo lo siguiente

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

saldrá and that -->. Similarmente /* this will be commented /* and so will this */ but not this */.

Mi solución es usar v-if="false"para especificar qué bloques quiero omitir (temporalmente).

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

Tenga en cuenta que esto no debe usarse en reemplazo de los comentarios adecuados para documentar su código. Es solo una forma conveniente de tener más control sobre los bloques que desea omitir durante el desarrollo.

Soy novato en Vue.js, pero //debería funcionar porque el código es javascript de todos modos. Buscando en los documentos encuentro este ejemplo . Si miras las primeras 2 líneas de javascript, verás comentarios con// .

ejemplo en archivo vinculado javascript:

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

...