향후 참조를 위해 vue.js 파일에 주석을 삽입해야하지만 문서에서 어떻게 수행하는지 찾을 수 없습니다.
내가 시도 //, /**/, {{-- --}},와 {# #},하지만 그들 중 누구도 제대로 작동하지 않습니다.
라 라벨의 칼날을 사용하고 있습니다. 그래서 이것은 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>
누구든지 주석을 삽입하는 방법 및 / 또는 코드를 주석 처리하는 방법을 알고 있습니까?
답변
<template>상황 에서 태그에 표준 HTML 주석을 사용하고 싶을 것 입니다. 그것들은 출력에서도 제거 될 것입니다.
<!-- Comment -->
답변
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>
답변
방금 테스트했습니다.
<template>
{{ /* this is a comment */ }}
<h1>Hello world</h1>
</template>
답변
태그 안에 있으면 댓글을 달 수 없다는 것을 알았습니다.
<!-- make sure it is outside a tag -->
<autocomplete
<!-- you can't place the comment out in here -->
>
</autocomplete>
답변
Vue Styleguidist에는 모범 사례가 포함되어 있으며 구성 요소에 주석을 추가하는 방법의 예를 보여줍니다.
https://vue-styleguidist.github.io/docs/Documenting.html#code-comments
하지만 일반적으로 …
에서 템플릿 또는 HTML 섹션 사용 HTML 주석
<!-- Comment -->
에서 스크립트 섹션 자바 스크립트 주석을 사용
// Comment
/* Comment */
에서 스타일 섹션 CSS를 사용 코멘트
/* comment */
답변
프로젝트에 유용하다면 장식없이 템플릿 위에 일반 텍스트를 넣을 수 있습니다. 구성 요소를 렌더링 할 때 완전히 무시됩니다.
This is some documentation about this component
- some
- info
<template></template>
<script></script>
<style></style>
답변
다음 팁은 코드 자체 에 주석을 다는 것이 아니라 개발 중에 코드 덩어리를 일시적으로 건너 뛸 수 있도록하는 것입니다.
주석에 열기 및 닫기 태그가 필요한 경우 파서가 태그를 일치시키는 방식이 불편할 수 있습니다. 예를 들어 다음
<!-- 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>
코드를 문서화하기 위해 적절한 주석 대신 사용해서는 안됩니다. 개발 중에 건너 뛰려는 블록을 더 많이 제어 할 수있는 편리한 방법입니다.
