Comment commenter du code dans un fichier vue.js?

J'ai besoin d'insérer un commentaire dans un fichier vue.js pour de futures références, mais je ne trouve pas comment vous faites cela dans la documentation.

Je l' ai essayé //, /**/, {{-- --}}et {# #}, mais aucun d'entre eux ne semble fonctionner.

J'utilise la lame de Laravel. Voici donc le 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> 

Quelqu'un sait-il comment insérer un commentaire et / ou comment commenter des morceaux de code?

Vous voudriez utiliser des commentaires HTML standard dans la <template>balise dans votre situation. Ils seront également supprimés de la sortie, ce qui est bien.

<!-- Comment -->

Comme Bill Criswell l'a dit, nous pouvons utiliser la syntaxe des commentaires HTML.

<!-- Comment -->

Mais, cela fonctionnera également en dehors de la balise de modèle, 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>

Je viens de tester ceci:

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

J'ai remarqué que vous ne pouvez pas commenter lorsque vous êtes à l'intérieur d'une balise:

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

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

Vue Styleguidist contient les meilleures pratiques et montre des exemples de comment commenter vos composants. https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

Mais en général...

Dans le modèle ou la section HTML, utilisez des commentaires HTML

<!-- Comment -->

Dans la section de script , utilisez des commentaires Javascript

// Comment
/* Comment */

Dans la section style , utilisez les commentaires CSS

/* comment */

Si cela est utile pour vos projets, vous pouvez mettre du texte brut au-dessus du modèle sans ornement. Il est complètement ignoré lors du rendu de votre composant.

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

Le conseil suivant ne concerne pas tant le commentaire (comme la documentation) du code en soi, mais plutôt le fait de vous permettre de sauter temporairement des morceaux de code pendant le développement.

Lorsque les commentaires nécessitent l'ouverture et la fermeture de balises, la manière dont l'analyseur les associe peut être peu pratique. Par exemple ce qui suit

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

sortira and that -->. De même /* this will be commented /* and so will this */ but not this */.

Ma solution est d'utiliser v-if="false"pour spécifier les blocs que je souhaite ignorer (temporairement).

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

Notez que cela ne doit pas être utilisé en remplacement des commentaires appropriés pour documenter votre code. C'est juste un moyen pratique d'avoir plus de contrôle sur les blocs que vous souhaitez ignorer pendant le développement.

Je suis noob dans Vue.js, mais //devrait fonctionner car le code est de toute façon javascript. En regardant dans la documentation, je trouve cet exemple . Si vous regardez les 2 premières lignes de javascript, vous verrez des commentaires avec //.

exemple dans un fichier lié javascript:

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

...