วิธีใส่รหัสความคิดเห็นในไฟล์ vue.js

ฉันจำเป็นต้องแทรกความคิดเห็นในไฟล์ vue.js สำหรับการอ้างอิงในอนาคต แต่ฉันไม่พบวิธีที่คุณทำในเอกสารนี้

ฉันได้พยายาม//, /**/, {{-- --}}และ{# #}แต่ไม่มีของพวกเขาดูเหมือนจะทำงาน

ฉันใช้ใบมีดของ Laravel นี่คือ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> 

ใครทราบวิธีแทรกความคิดเห็นและ / หรือวิธีแสดงความคิดเห็นของโค้ด

คุณต้องการใช้ความคิดเห็น HTML มาตรฐานใน<template>แท็กในสถานการณ์ของคุณ พวกเขาจะถูกถอดออกจากผลผลิตเช่นกันซึ่งเป็นสิ่งที่ดี

<!-- Comment -->

ดังที่ Bill Criswell กล่าวว่าเราสามารถใช้ไวยากรณ์ความคิดเห็น HTML ได้

<!-- Comment -->

แต่มันจะทำงานนอกแท็กเทมเพลตด้วยเช่นกัน 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>

ฉันเพิ่งทดสอบสิ่งนี้:

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

ฉันสังเกตเห็นว่าคุณไม่สามารถแสดงความคิดเห็นได้เมื่ออยู่ในแท็ก:

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

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

Vue Styleguidist มีแนวทางปฏิบัติที่ดีที่สุดและแสดงตัวอย่างวิธีแสดงความคิดเห็นส่วนประกอบของคุณ https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

แต่โดยทั่วไป ...

ในเทมเพลตหรือส่วน HTML ใช้ความคิดเห็น HTML

<!-- Comment -->

ในส่วนสคริปต์ให้ใช้ความคิดเห็น Javascript

// Comment
/* Comment */

ในส่วนสไตล์ใช้ความคิดเห็น CSS

/* comment */

หากเป็นประโยชน์สำหรับโครงการของคุณคุณสามารถวางข้อความธรรมดาไว้เหนือเทมเพลตโดยไม่มีการประดับประดา จะถูกละเว้นโดยสิ้นเชิงเมื่อคุณแสดงองค์ประกอบของคุณ

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

เคล็ดลับต่อไปนี้ไม่มากเกี่ยวกับการแสดงความคิดเห็น (เช่นเดียวกับการจัดทำเอกสาร) รหัสต่อ se แต่เป็นการอนุญาตให้คุณข้ามส่วนของโค้ดชั่วคราวระหว่างการพัฒนา

เมื่อความคิดเห็นต้องการการเปิดและปิดแท็กวิธีที่โปรแกรมแยกวิเคราะห์จับคู่อาจไม่สะดวก ตัวอย่างเช่นต่อไปนี้

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

and that -->ออกจะ ในทำนองเดียวกัน/* this will be commented /* and so will this */ but not this */.

วิธีแก้ปัญหาของฉันคือใช้v-if="false"เพื่อระบุว่าฉันต้องการข้ามบล็อกใด (ชั่วคราว)

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

โปรดทราบว่าไม่ควรใช้สิ่งนี้เพื่อแทนที่ความคิดเห็นที่เหมาะสมในการจัดทำเอกสารรหัสของคุณ เป็นเพียงวิธีที่สะดวกในการควบคุมบล็อกที่คุณต้องการข้ามระหว่างการพัฒนาได้มากขึ้น

ฉันเป็น noob ใน Vue.js แต่//ควรใช้งานได้เพราะโค้ดเป็นจาวาสคริปต์ มองในเอกสารฉันพบตัวอย่างนี้ หากคุณดู 2 บรรทัดแรกของจาวาสคริปต์คุณจะเห็นความคิดเห็นด้วย//บรรทัดจาวาสคริปต์คุณจะเห็นความเห็นด้วย

ตัวอย่างในไฟล์ที่เชื่อมโยงกับจาวาสคริปต์:

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

...