web-dev-qa-db-ja.com

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>

誰でもコメントの挿入方法やコードのコメント方法を知っていますか？

vue.jsbladelaravel-blade
46
Pathros

状況に応じて、<template>タグで標準のHTMLコメントを使用する必要があります。また、出力から削除されます。これはニースです。

<!-- Comment -->
92
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>
17
Vaisakh Rajagopal

私はこれをテストしました：

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

タグの中にいるときはコメントできないことに気付きました：

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

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

私はVue.jsの初心者ですが、コードはJavaScriptであるため、//は機能するはずです。ドキュメントを見ると、私はこれを見つけます 例 。 JavaScriptの最初の2行を見ると、//のコメントが表示されます。

javascriptリンクファイルの例：

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

...
1
Juan

Htmlブロック全体をコメントアウトする必要がある場合は、v-if="false"を使用して、vueを後続のコードの塊に「ブラインド」できます。

<template>
<div>
    Hello
    <div v-if="false">
        This part will be skipped.
    </div>
    World!
</div>
</template>
1
Michael Ekoka