Làm cách nào để nhận xét mã trong tệp vue.js?

Tôi có nhu cầu chèn nhận xét bên trong tệp vue.js để tham khảo trong tương lai, nhưng tôi không tìm thấy cách bạn thực hiện việc này trong tài liệu.

Tôi đã cố gắng //, /**/, {{-- --}}, và {# #}, nhưng không ai trong số họ dường như làm việc.

Tôi đang sử dụng thanh kiếm của Laravel. Vì vậy, đây là 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> 

Có ai biết cách chèn một bình luận và / hoặc làm thế nào để bình luận các đoạn mã không?

Bạn muốn sử dụng các nhận xét HTML chuẩn trong <template>thẻ trong trường hợp của mình. Chúng cũng sẽ bị loại bỏ khỏi đầu ra, một điều tốt.

<!-- Comment -->

Như Bill Criswell đã nói, chúng ta có thể sử dụng cú pháp bình luận HTML.

<!-- Comment -->

Tuy nhiên, nó cũng sẽ hoạt động bên ngoài thẻ mẫu, 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>

Tôi vừa thử nghiệm điều này:

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

Tôi nhận thấy rằng bạn không thể nhận xét khi bạn đang ở trong một thẻ:

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

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

Vue Styleguidist chứa các phương pháp hay nhất và hiển thị các ví dụ về cách nhận xét các thành phần của bạn. https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

Nhưng về tổng thể...

Trong phần mẫu hoặc HTML, hãy sử dụng các nhận xét HTML

<!-- Comment -->

Trong phần script sử dụng các chú thích Javascript

// Comment
/* Comment */

Trong phần phong cách sử dụng các chú thích CSS

/* comment */

Nếu nó hữu ích cho các dự án của bạn, bạn có thể đặt văn bản thuần túy phía trên mẫu mà không cần tô điểm. Nó hoàn toàn bị bỏ qua khi bạn kết xuất thành phần của mình.

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

Mẹo sau đây không liên quan nhiều đến việc bình luận (như trong tài liệu) mã, mà là cho phép bạn tạm thời bỏ qua các đoạn mã trong quá trình phát triển.

Khi nhận xét yêu cầu thẻ mở và thẻ đóng, cách mà trình phân tích cú pháp khớp với chúng có thể gây bất tiện. Ví dụ như sau

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

sẽ xuất ra and that -->. Tương tự /* this will be commented /* and so will this */ but not this */.

Giải pháp của tôi là sử dụng v-if="false"để chỉ định khối nào tôi muốn (tạm thời) bỏ qua.

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

Lưu ý rằng điều này không nên được sử dụng để thay thế các nhận xét thích hợp để ghi lại mã của bạn. Đó chỉ là một cách thuận tiện để kiểm soát nhiều hơn các khối mà bạn muốn bỏ qua trong quá trình phát triển.

Tôi là noob trong Vue.js, nhưng vẫn //nên làm việc vì dù sao mã cũng là javascript. Nhìn trong tài liệu, tôi tìm thấy ví dụ này . Nếu bạn nhìn vào 2 dòng javascript đầu tiên, bạn sẽ thấy các bình luận với //.

ví dụ trong tệp liên kết javascript:

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

...