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

Question

我需要在 vue.js 文件中插入注释以供将来参考，但我在文档中找不到您如何执行此操作。

我已经尝试了 //、/**/、{{-- --}} 和 {# #}，但其中 none 似乎有效。

我正在使用 Laravel 的 blade。所以这是 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

我是 Vue.js 的菜鸟，但 // 应该可以工作，因为代码是 javascript。查看文档我发现这个 example。如果您查看 javascript 的前两行，您会看到带有 //.

的注释

javascript 链接文件中的示例：

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

...

Answer 2

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

<!-- Comment -->

Answer 3

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

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

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

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

Answer 5

下面的提示与评论（如在文档中）代码本身无关，而是关于允许您在开发过程中暂时跳过代码块。

当评论需要开始和结束标签时，解析器匹配它们的方式可能会很不方便。例如下面的

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

请注意，这不应用于替换适当的注释来记录您的代码。这只是一种方便的方式，可以更好地控制您在开发过程中要跳过的块。

Answer 6

我刚刚测试了这个：

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

Answer 7

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

但总的来说...

在模板或HTML部分使用HTML评论

<!-- Comment -->

在脚本部分使用Javascript评论

// Comment
/* Comment */

在样式部分使用CSS评论

/* comment */

Answer 8

如果对您的项目有用，您可以将纯文本放在模板上方，不加修饰。当您渲染组件时，它会被完全忽略。

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

Answer 9

试试这个选项

<%-- COMMENT HERE --%>

Answer 10

「=12=」在 wa e phie / .使用“=11=” "=10="

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

How to comment code in a vue.js file?

blade

vue.js

laravel-blade