Wie kann man Code in einer vue.js-Datei kommentieren?

98

Ich muss einen Kommentar in eine vue.js-Datei einfügen, um später darauf verweisen zu können, aber ich finde in den Dokumenten nicht, wie Sie dies tun.

Ich habe versucht //, /**/, {{-- --}}, und {# #}, aber keiner von ihnen scheinen zu arbeiten.

Ich benutze Laravels Klinge. Das ist also das 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> 

Weiß jemand, wie man einen Kommentar einfügt und / oder wie man Codeteile kommentiert?

Pathros
quelle
1
Wenn Sie mehrzeilige Kommentare suchen, funktioniert der Standard-HTML-Kommentar : <!-- -->. Aber es hört sich so an, als würden Sie nach Inline-Kommentaren suchen?
Adam
Ahh, das habe ich vergessen. Es ist in der Tat HTMLCode! Danke
Pathros
1
Standardmäßig werden HTML-Kommentare von vue vuejs.org/v2/api/#comments entfernt
Mike3355
1
Die Template-Syntax von Vue ist der von Lenker sehr ähnlich . Es ist erwähnenswert, dass Lenker erlaubt {{! comments like this }}und {{!-- comments {{like this}} that can contain double-braces --}}. Diese werden im Gegensatz zu anderen nicht in der Ausgabe gerendert <!-- html comments -->. Ich habe beide {{! ... }}und {{!-- ... --}}mit Vue ausprobiert und leider werden sie nicht unterstützt. Würden Sie in Betracht ziehen, sie Ihrer Frage für Benutzer hinzuzufügen, die darauf stoßen?
Chharvey

Antworten:

173

Sie möchten <template>in Ihrer Situation Standard-HTML-Kommentare im Tag verwenden. Sie werden auch von der Ausgabe entfernt, was sehr schön ist.

<!-- Comment -->
Bill Criswell
quelle
1
Afaict, sie werden in Vue 3 🤷
dtk
Ja, das bricht meine Vorlagen in Vue 3
Adam Starrh vor
30

Wie Bill Criswell sagte, können wir die HTML-Kommentarsyntax verwenden.

<!-- Comment -->

Es funktioniert jedoch auch außerhalb des Vorlagen-Tags 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>
Vaisakh Rajagopal
quelle
1
Dies führt zu "Unerwartetes Token (1: 1)" mit Vue 2.5.13.
Alen Siljak
Früher habe ich außerhalb der unterstützten Root-Tags Kommentare abgegeben und festgestellt, dass dies je nach Inhalt der Kommentare zu Problemen führt. Ich wünsche vue unterstützte Kommentare außerhalb der Root-Tags, da dies der sinnvollste Ort ist, um READMEs und dergleichen zu erstellen, aber na ja.
aaaaaa
Verwenden Sie dort gültige Tags, anstatt Kommentare außerhalb der unterstützten Stammregisterkarten zu verwenden. <comment>Commenting here</comment. Sie müssen diese zu Ihrer Webpack-Konfiguration hinzufügen. vue-loader.vuejs.org/guide/custom-blocks.html#example
David R.
18

Ich habe das gerade getestet:

<template>
    {{ /* this is a comment */ }}
    <h1>Hello world</h1>
</template>
Fulldump
quelle
2
Cool, es erscheint nicht in der HTML-Ausgabe. Mit dieser Syntax werden jedoch nur einzeilige Kommentare unterstützt.
d9k
Leider kann ich das nicht zum Error parsing JavaScript expression: Unexpected token (1:24)
Laufen bringen
9

Mir ist aufgefallen, dass Sie keine Kommentare abgeben können, wenn Sie sich in einem Tag befinden:

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

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

Wenn es für Ihre Projekte nützlich ist, können Sie einfachen Text ohne Verzierung über die Vorlage setzen. Es wird beim Rendern Ihrer Komponente vollständig ignoriert.

This is some documentation about this component
   - some
   - info
<template></template>
<script></script>
<style></style>
Rory Jarrard
quelle
4

Vue Styleguidist enthält Best Practices und zeigt Beispiele zum Kommentieren Ihrer Komponenten. https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

Aber im Allgemeinen...

Verwenden Sie in der Vorlage oder im HTML-Bereich HTML-Kommentare

<!-- Comment -->

In Skript Abschnitt Javascript Kommentare verwenden

// Comment
/* Comment */

In Stil Abschnitt Verwendung CSS Kommentare

/* comment */
ScottyG
quelle
0

Im folgenden Tipp geht es nicht so sehr um das Kommentieren Code per se zu (wie beim Dokumentieren), sondern vielmehr darum, dass Sie während der Entwicklung vorübergehend Codestücke überspringen können.

Wenn Kommentare das Öffnen und Schließen von Tags erfordern, kann die Art und Weise, wie der Parser mit ihnen übereinstimmt, unpraktisch sein. Zum Beispiel das Folgende

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

wird ausgegeben and that -->. Ähnlich /* this will be commented /* and so will this */ but not this */.

Meine Lösung besteht darin v-if="false", anzugeben, welche Blöcke ich (vorübergehend) überspringen möchte.

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

Beachten Sie, dass dies nicht als Ersatz für korrekte Kommentare zur Dokumentation Ihres Codes verwendet werden sollte. Dies ist nur eine bequeme Möglichkeit, mehr Kontrolle über Blöcke zu haben, die Sie während der Entwicklung überspringen möchten.

Michael Ekoka
quelle
-2

Ich bin noob in Vue.js, //sollte aber funktionieren, da der Code sowieso Javascript ist. In den Dokumenten finde ich dieses Beispiel . Wenn Sie die ersten 2 Zeilen von Javascript betrachten, sehen Sie Kommentare mit //.

Beispiel in einer mit Javascript verknüpften Datei:

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

...
Juan
quelle
1
Dies funktioniert jedoch nicht innerhalb des templateTags, sondern innerhalb des scriptTags
Pavindu