Bir vue.js dosyasında kod nasıl yorumlanır?

Gelecekteki referanslar için bir vue.js dosyasına yorum eklemem gerekiyor, ancak bunu nasıl yaptığınızı belgelerde bulamıyorum.

Ben denedim //, /**/, {{-- --}}, ve {# #}, ancak bunların hiçbiri işe görünmektedir.

Laravel'in bıçağını kullanıyorum. Yani bu 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> 

Yorum eklemeyi ve / veya kod parçalarını nasıl yorumlayacağını bilen var mı?

Sizin <template>durumunuzda etikette standart HTML yorumları kullanmak istersiniz . Çıktıdan da çıkarılacaklar ki bu da güzel.

<!-- Comment -->

Bill Criswell'in dediği gibi, HTML yorum sözdizimini kullanabiliriz.

<!-- Comment -->

Ancak, yorum.vue şablon etiketinin dışında da çalışacaktır

<!-- 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>

Bunu az önce test ettim:

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

Bir etiketin içindeyken yorum yapamayacağınızı fark ettim:

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

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

Vue Styleguidist, en iyi uygulamaları içerir ve bileşenlerinizi nasıl yorumlayacağınıza dair örnekleri gösterir. https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

Ama genel olarak ...

Gelen şablon veya HTML bölüm kullanımı HTML yorumlarla

<!-- Comment -->

Gelen komut bölümünde JavaScript yorumlarınız dikkate

// Comment
/* Comment */

Gelen stil bölümü kullanımı CSS yorumlarla

/* comment */

Projeleriniz için faydalı ise şablonun üzerine süssüz düz metin koyabilirsiniz. Bileşeninizi oluşturduğunuzda tamamen yok sayılır.

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

Aşağıdaki ipucu kodun kendi başına yorumlama (belgelemede olduğu gibi) hakkında değil, geliştirme sırasında kod parçalarını geçici olarak atlamanıza izin vermekle ilgilidir.

Açıklamalar, açma ve kapama etiketleri gerektirdiğinde, ayrıştırıcının bunlarla eşleşme şekli uygunsuz olabilir. Örneğin aşağıdaki

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

çıkacak and that -->. Benzer şekilde /* this will be commented /* and so will this */ but not this */.

Çözümüm, v-if="false"hangi blokları (geçici olarak) atlamak istediğimi belirtmek için kullanmaktır .

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

Kodunuzu belgelemek için uygun yorumların yerine bunun kullanılmaması gerektiğini unutmayın. Geliştirme sırasında atlamak istediğiniz bloklar üzerinde daha fazla kontrole sahip olmanın uygun bir yolu.

Vue.js'de noob'um, ancak //kod yine de javascript olduğu için çalışmalıyım. Dokümanlara baktığımda bu örneği buluyorum . Javascript'in ilk 2 satırına bakarsanız, ile ilgili yorumları göreceksiniz //.

javascript bağlantılı dosyadaki örnek:

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

...