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

94

Мне нужно вставить комментарий в файл 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> 

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

Патрос
источник
1
Если вы ищете многострочно комментирование, стандарт HTML комментарий будет работать: <!-- -->. Но похоже, что вы ищете встроенные комментарии?
Адам
Ах, я забыл попробовать. Это действительно HTMLкод! Thnx
Pathros
1
По умолчанию комментарии HTML удаляются vue vuejs.org/v2/api/#comments
Mike3355
1
Синтаксис шаблонов Vue очень похож на Handlebars . Стоит отметить, что Handlebars позволяет {{! comments like this }}и {{!-- comments {{like this}} that can contain double-braces --}}. Они не отображаются на выходе, в отличие от других <!-- html comments -->. Я пробовал оба варианта {{! ... }}и {{!-- ... --}}с Vue, но, к сожалению, они не поддерживаются. Не могли бы вы добавить их в свой вопрос для пользователей, которые на него наткнулись?
chharvey

Ответы:

167

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

<!-- Comment -->
Билл Крисвелл
источник
Afaict, они не раздеваются в Vue 3 🤷
dtk
27

Как сказал Билл Крисвелл, мы можем использовать синтаксис комментариев 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>
Вайсакх Раджагопал
источник
1
Это приводит к появлению «Неожиданного токена (1: 1)» с Vue 2.5.13.
Ален Сильджак
Я использовал комментарии за пределами поддерживаемых корневых тегов и обнаружил, что это вызывает проблемы в зависимости от содержания комментариев. Я бы хотел, чтобы vue поддерживал комментарии вне корневых тегов, потому что это наиболее разумное место для создания README и т.п., ну да ладно.
aaaaaa
Вместо использования комментариев за пределами поддерживаемых корневых вкладок используйте там допустимые теги. <comment>Commenting here</comment. Вам нужно будет добавить их в конфигурацию вашего веб-пакета. vue-loader.vuejs.org/guide/custom-blocks.html#example
Дэвид Р.
18

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

<template>
    {{ /* this is a comment */ }}
    <h1>Hello world</h1>
</template>
Полный скачок
источник
2
Круто, это не отображается в выводе html. Но этот синтаксис поддерживает только однострочные комментарии.
d9k
К сожалению, я не могу заставить это работать:Error parsing JavaScript expression: Unexpected token (1:24)
dtk
9

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

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

<autocomplete
<!-- you can't place the comment out in here -->
>
</autocomplete>
Хуан Вака
источник
4

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

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

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

<!-- Comment -->

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

// Comment
/* Comment */

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

/* comment */
ScottyG
источник
4

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

This is some documentation about this component
   - some
   - info
<template></template>
<script></script>
<style></style>
Рори Джаррард
источник
0

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

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

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

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

Майкл Экока
источник
-2

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

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

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

...
Хуан
источник
1
Однако это работает не внутри templateтега, а внутри scriptтега
Павинду