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

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?

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

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>

Ich habe das gerade getestet:

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

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>

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>

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 */

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.

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.

...