Comment commenter le code dans un fichier vue.js ?

Question

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

J'ai essayé // , /**/ , {{-- --}} et {# #} mais aucune d'entre elles 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 ?

Answer 1

Il est préférable d'utiliser des commentaires HTML standard dans le champ <template> dans votre situation. Ils seront également supprimés de la sortie, ce qui est bien.

<!-- Comment -->

Answer 2

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

<!-- Comment -->

Mais, cela fonctionnera aussi en dehors de la balise du modèle, commentaire.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>

Answer 3

J'ai remarqué qu'il n'est pas possible de commenter lorsque l'on se trouve à l'intérieur d'une balise :

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

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

Answer 4

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

Lorsque les commentaires nécessitent des balises d'ouverture et de fermeture, la façon dont l'analyseur syntaxique les fait correspondre peut être gênante. Par exemple, le commentaire suivant

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

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

Ma solution consiste à utiliser v-if="false" pour spécifier les blocs que je veux 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 de commentaires appropriés pour documenter votre code. Il s'agit simplement d'un moyen pratique d'avoir plus de contrôle sur les blocs que vous souhaitez ignorer pendant le développement.

Answer 5

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

exemple dans le fichier lié en javascript :

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

...