Vue.js 리스트 렌더링
VueJs에서 list rendering 기능으로 다양한 복잡한 데이터 주고 받는 작업을 쉽게 해결할 수 있고 반복문을 통해 작업 시간을 줄일수 있습니다. 그렇지만 우리가 익숙한 HTML 요서들 Vue에서 바로 사용할 수 없고 특별한 Vue 문법을 사용해여 합니다.
Vue.js에서는 데이터를 효과적으로 렌더링하기 위해 특별한 문법과 기능을 제공합니다. Vue.js의 주요 기능 중 하나인 "리스트 렌더링"은 반복적으로 나타나는 데이터를 간편하게 처리할 수 있도록 도와줍니다.
일반적으로 Vue에서 리스트를 렌더링하는 방법은 v-for 디렉티브를 사용하는 것입니다. 이 디렉티브를 사용하면 배열이나 객체 등과 같은 데이터를 기반으로 반복문을 수행하여 HTML 요소를 생성할 수 있습니다.
예를 들어, 다음은 Vue에서 v-for 디렉티브를 사용하여 간단한 리스트를 렌더링하는 예제입니다:
<div id="app">
<ul>
<li v-for="item in items">{{ item.name }}</li>
</ul>
</div>
Vue 인스턴스:
new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
}
});
이 예제에서는 v-for 디렉티브를 사용하여 items 배열의 각 항목을 반복하고, 각 항목의 name 속성을 출력하고 있습니다.
Vue의 템플릿 문법은 데이터와 뷰를 매우 쉽게 바인딩할 수 있도록 도와주며, v-for 외에도 다양한 디렉티브와 기능을 활용하여 다양한 상황에서 유연하게 작업할 수 있습니다.
a 테그의 리스트 렌더링
CHALLENGE : a 태트 href 값은 데이터 파일 안에 있는 링크 값으로 데이터 렌더링 하기
<a href="{{ link }}">READ MORE</a>
username: "Prime Blogs",
date: "2022.12.26",
title: "Vuejs Firebase 연동 ",
link: "https://prmblogs.tistory.com/2",
Action : 우선, HTML의 속성에는 {{ mustached }}를 사용할 수 없습니다. 위처럼 사용하고 싶으면v-bind 디렉티브를 사용 해야 됩니다.
{{ mustache }} 구문은 텍스트 보간을 위한 것으로, HTML 속성에 직접 사용할 수 없습니다. HTML 속성에 동적으로 값을 바인딩하려면 v-bind 디렉티브를 사용해야 합니다. 따라서 v-bind를 사용하여 href 속성에 데이터 값을 동적으로 바인딩할 수 있습니다.
<a :href="project.link">READ MORE</a><a v-bind:href="project.link">READ MORE</a>
router-link 사용하는 경우 다음 문법을 참고해주시면 됩니다
<router-link :to="`/singleproject/${project.id}`">Project1</router-link> <router-link v-bind:to="`/singleproject/${project.id}`">Project1</router-link>
추가적으로 javascript 문자 사이 요소 값 넣고 싶을 경우 `` 을 사용하고 "$" 표시로 데이터 렌더링 가능합니다.
