Как прокомментировать код в файле vue.js?

Мне нужно вставить комментарий в файл vue.js для будущих ссылок, но я не могу найти, как это сделать в документации.

Я попытался //, /**/, {{-- --}}и {# #}, но ни один из них не похоже на работу.

Я использую лезвие Laravel. Итак, это 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> 

Кто-нибудь знает, как вставить комментарий и / или как комментировать фрагменты кода?

В <template>вашей ситуации вы захотите использовать стандартные HTML-комментарии в теге. Они также будут удалены из вывода, что приятно.

<!-- Comment -->

Как сказал Билл Крисвелл, мы можем использовать синтаксис комментариев HTML.

<!-- Comment -->

Но он будет работать и за пределами тега шаблона, 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>

Я только что это проверил:

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

Я заметил, что вы не можете комментировать, когда находитесь внутри тега:

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

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

Vue Styleguidist содержит лучшие практики и показывает примеры того, как комментировать ваши компоненты. https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

Но в основном...

В шаблоне или разделе HTML используйте комментарии HTML

<!-- Comment -->

В разделе сценария используйте комментарии Javascript

// Comment
/* Comment */

В разделе стилей используйте комментарии CSS

/* comment */

Если это полезно для ваших проектов, вы можете поместить простой текст над шаблоном без каких-либо украшений. Он полностью игнорируется при рендеринге компонента.

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

Следующий совет касается не столько комментирования (как документирования) кода как такового, сколько разрешения вам временно пропускать фрагменты кода во время разработки.

Когда для комментариев требуются открывающие и закрывающие теги, то способ, которым парсер сопоставляет их, может быть неудобным. Например, следующие

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

выведет and that -->. Аналогично /* this will be commented /* and so will this */ but not this */.

Мое решение - v-if="false"указать, какие блоки я хочу (временно) пропустить.

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

Обратите внимание, что это не должно использоваться вместо правильных комментариев для документирования вашего кода. Это просто удобный способ получить больший контроль над блоками, которые вы хотите пропустить во время разработки.

Я нуб в Vue.js, но //должен работать, потому что код в любом случае является javascript. Просматривая документы, я нахожу этот пример . Если вы посмотрите первые 2 строки javascript, вы увидите комментарии с //.

пример в связанном файле javascript:

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

...