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

 <template>  <div>  Hello There! </div> </template> <style><style>  <script> // Commenting only 1 line /** * Commenting multiple lines * Commenting multiple lines */ </script>

Answer 3

如果这对您的项目有用，则可以在模板上方放置纯文本，而无需修饰。呈现组件时，它将被完全忽略。

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

Answer 4

我刚刚测试过：

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

Answer 5

Vue Styleguidist包含最佳实践，并显示了有关如何注释组件的示例。 https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

但是总的来说...

在模板或HTML部分中，使用HTML注释

<!-- Comment -->

在脚本部分中，使用Javascript注释

// Comment
/* Comment */

在样式部分中，使用CSS注释

/* comment */

Answer 6

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

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

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

Answer 7

我是Vue.js中的noob，但是//应该可以工作，因为代码仍然是javascript。查看文档我发现example。如果您查看javascript的前两行，您会看到//的评论。

javascript链接文件中的示例：

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

...

Answer 8

如果您需要注释掉整个html块，则可以使用v-if="false"对后面的代码块“盲目”。

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

Answer 9

试试这个选项

<%-- COMMENT HERE --%>

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

9 个答案: