Vue.js를 이제 막 시작하셨습니까? 아니면 Vue와 함께 일한 지 오래되었나요? 이 치트 시트에는 데이터를 HTML로 출력할 때 가장 일반적인 9가지 작업과 솔루션이 나열되어 있습니다.

이 모든 샘플에서 첫 번째 부분은 구문을 보여주고 두 번째 부분은 실제 데이터의 사용법을 보여줍니다.

데이터를 HTML로 출력

앱의 첫 번째 테스트 또는 HTML 요소 간의 데이터 렌더링:

{{ variable }}
↓
{{ metadata.subtitle.value }}

표준 클래스 속성 추가

앱을 테스트한 후 스타일을 사용하여 보기 좋게 만들고 싶습니다.

<... class="classname">
↓
<div class="sidebar__inner">

데이터를 HTML 속성으로 출력

링크를 추가하거나 alt 태그로 이미지를 렌더링할 때 다음과 같이 요소의 속성을 채울 수 있습니다.

< ... :name="variable">
↓
<a :href="`https://twitter.com/${author.twitter.value}`">

HTML 출력

헤드리스 CMS에서 서식 있는 텍스트를 사용할 때와 같은 특정 경우에는 이미 형식이 지정된 HTML을 렌더링해야 합니다.

< ... v-html="variable"></...>
↓
<div v-html="article.teaser"></div>

데이터 세트 반복

반복은 블로그 또는 제품 카탈로그의 색인 페이지와 같은 항목 목록을 만드는 데 유용합니다.

< ... v-for="item in collectionVariable" :key="item.uniqueKey">
↓
<article v-for="article in articles" :key="article.id" ... >

인덱스를 사용하여 데이터 세트 반복

이전과 동일한 사용 사례이지만 이렇게 하면 각 항목의 인덱스에 액세스할 수 있습니다.

< ... v-for="(item, index) in collectionVariable" :key="item.id">
↓
<article v-for="(article, index) in articles" :key="article.id" ... >

렌더링 조건 마크업

조건을 사용하면 데이터를 기반으로 마크업의 특정 부분을 숨기거나 표시할 수 있습니다.

<... v-if="variable !== null">
↓
<div v-if="data.length > 0"> ... </div>

else 분기를 포함한 렌더링 조건 마크업

또한 방문자에게 어떤 일이 일어나고 있음을 알리기 위해 비동기 데이터 가져오기의 경우 프리로더를 표시하는 데 사용할 수 있습니다.

<... v-if="variable !== null"> ...
<... v-else>
↓
<div v-if="data.length > 0"> ... </div>
<div v-else>Loading...</div>

하위 구성 요소에 데이터 전달

구성 요소를 사용하기 시작할 때 다음과 같이 부모의 데이터를 구성 요소에 제공할 수 있습니다.

<component :componentVariable="variable">
↓
<links :author="author">

printable form에서 이 치트 시트를 다운로드하고 alternatives for React and Angular을 확인할 수도 있습니다.