Como comentar o código em um arquivo vue.js?

Preciso inserir um comentário dentro de um arquivo vue.js para referências futuras, mas não encontro como fazer isso na documentação.

Eu tentei //, /**/, {{-- --}}, e {# #}, mas nenhum deles parece funcionar.

Estou usando a lâmina do Laravel. Então este é o 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> 

Alguém sabe inserir um comentário e / ou comentar trechos de código?

Você gostaria de usar comentários HTML padrão na <template>tag em sua situação. Eles serão retirados da saída também, o que é bom.

<!-- Comment -->

Como disse Bill Criswell, podemos usar a sintaxe de comentário HTML.

<!-- Comment -->

Mas também funcionará fora da tag template, 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>

Acabei de testar isto:

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

Percebi que você não pode comentar quando está dentro de uma tag:

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

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

Se for útil para seus projetos, você pode colocar texto simples acima do modelo, sem adornos. Ele é completamente ignorado quando você renderiza seu componente.

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

O Vue Styleguidist contém as melhores práticas e mostra exemplos de como comentar seus componentes. https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

Mas em geral...

No modelo ou na seção HTML, use comentários HTML

<!-- Comment -->

Na seção de script , use comentários de Javascript

// Comment
/* Comment */

Na seção de estilo , use comentários CSS

/* comment */

A dica a seguir não é tanto sobre comentar (como documentar) o código em si, mas sim sobre permitir que você ignore temporariamente partes do código durante o desenvolvimento.

Quando os comentários exigem a abertura e o fechamento de tags, a maneira como o analisador os corresponde pode ser inconveniente. Por exemplo o seguinte

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

irá produzir and that -->. Da mesma forma /* this will be commented /* and so will this */ but not this */.

Minha solução é usar v-if="false"para especificar quais blocos eu quero (temporariamente) pular.

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

Observe que isso não deve ser usado em substituição aos comentários adequados para documentar seu código. É apenas uma maneira conveniente de ter mais controle sobre os blocos que deseja pular durante o desenvolvimento.

Eu sou novato no Vue.js, mas //deve funcionar porque o código é javascript mesmo assim. Olhando na documentação encontro este exemplo . Se você olhar as 2 primeiras linhas do javascript, verá comentários com //.

exemplo em arquivo vinculado a javascript:

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

...