Bagaimana cara memberi komentar kode di file vue.js?

Saya memiliki kebutuhan untuk memasukkan komentar di dalam file vue.js untuk referensi di masa mendatang, tetapi saya tidak menemukan cara Anda melakukan ini di dokumen.

Saya telah mencoba //, /**/, {{-- --}}, dan {# #}, namun tidak satupun dari mereka tampaknya bekerja.

Saya menggunakan pisau Laravel. Jadi ini adalah 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> 

Adakah yang tahu cara memasukkan komentar dan / atau cara memberi komentar pada potongan kode?

Anda ingin menggunakan komentar HTML standar di <template>tag dalam situasi Anda. Mereka akan dilucuti dari output juga yang bagus.

<!-- Comment -->

Seperti yang dikatakan Bill Criswell, kita dapat menggunakan sintaks komentar HTML.

<!-- Comment -->

Tapi, Ini akan bekerja di luar tag template juga, 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>

Saya baru saja menguji ini:

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

Saya perhatikan bahwa Anda tidak dapat berkomentar ketika Anda berada di dalam tag:

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

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

Vue Styleguidist berisi praktik terbaik dan menunjukkan contoh cara mengomentari komponen Anda. https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

Tapi secara Umum ...

Di bagian template atau HTML gunakan komentar HTML

<!-- Comment -->

Di bagian script gunakan komentar Javascript

// Comment
/* Comment */

Di bagian gaya gunakan komentar CSS

/* comment */

Jika berguna untuk proyek Anda, Anda dapat meletakkan teks biasa di atas template tanpa hiasan. Ini benar-benar diabaikan saat Anda merender komponen Anda.

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

Tip berikut ini bukan tentang mengomentari (seperti dalam mendokumentasikan) kode itu sendiri, melainkan tentang memungkinkan Anda untuk sementara melewati potongan kode selama pengembangan.

Jika komentar memerlukan tag pembuka dan penutup, cara pengurai cocok dengan mereka bisa jadi tidak nyaman. Misalnya berikut ini

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

akan mengeluarkan and that -->. Demikian pula /* this will be commented /* and so will this */ but not this */.

Solusi saya adalah menggunakan v-if="false"untuk menentukan blok mana yang ingin saya lewati (sementara).

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

Perhatikan bahwa ini tidak boleh digunakan sebagai pengganti komentar yang tepat untuk mendokumentasikan kode Anda. Ini hanya cara mudah untuk memiliki lebih banyak kontrol atas blok yang ingin Anda lewati selama pengembangan.

Saya noob di Vue.js, tetapi //harus berfungsi karena kodenya adalah javascript. Mencari di dokumen saya menemukan contoh ini . Jika Anda melihat 2 baris pertama javascript, Anda akan melihat komentar dengan //.

contoh dalam file terkait javascript:

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

...