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

斯丁Davaid2020-03-11

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

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

L西里2020/03/11 10:26:34

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

Eva斯丁2020/03/11 10:26:34

我刚刚测试过：

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

小宇宙乐理查德2020/03/11 10:26:34

我在Vue.js中不是菜鸟，但是//应该可以正常工作，因为无论如何代码都是JavaScript。在文档中查找此示例。如果您查看javascript的前2行，则会看到带有的注释//。

javascript链接文件中的示例：

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

...

Sam小哥逆天2020/03/11 10:26:34

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

<!-- Comment -->

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer