如何在vue.js文件中注释代码？

Question

我需要在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> 

有人知道如何插入注释和/或如何注释代码段吗？

Answer 1

您希望根据情况在<template>标记中使用标准HTML注释。它们也会从输出中删除，这很好。

<!-- Comment -->

Answer 2

正如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>

Answer 3

我刚刚测试过：

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

Answer 4

[我注意到当您在标签内时，您无法发表评论：

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

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

Answer 5

我是Vue.js的菜鸟，但是//应该可以工作，因为无论如何代码都是JavaScript。查看文档，我发现此example。如果您查看JavaScript的前2行，则会看到带有//的注释。

JavaScript链接文件中的示例：

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

...

Answer 6

下面的技巧本质上不是关于[[commenting（如在文档中）代码，而是关于允许您在开发期间暂时跳过代码块。

当注释需要打开和关闭标签时，解析器匹配它们的方式可能很不方便。例如以下

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

请注意，不应将其用于替换适当的注释以记录您的代码。这是对开发期间要跳过的块进行更多控制的便捷方法。