Як коментувати код у файлі vue.js?

Мені потрібно вставити коментар у файл vue.js для подальших посилань, але я не знаходжу, як ви це робите в документах.

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

Я використовую клинок Ларавеля. Отже, це 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> 

Хтось знає, як вставити коментар та / або як коментувати фрагменти коду?

Ви хочете використовувати стандартні коментарі HTML у <template>тезі у вашій ситуації. Вони також будуть позбавлені результату, що приємно.

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

...