Vue.js 기초 문법 및 핵심 지시자 정리
데이터 바인딩과 템플릿 구문
Vue에서 가장 기본적인 데이터 출력 방식은 중괄호 두 개({{ }})를 사용하는 문자열 보간법이다. 이 방식은 데이터 속성의 값을 실시간으로 화면에 반영한다.
<div id="app">
<p>{{ title }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
title: 'Welcome to Vue'
}
});
</script> ...
8월 11일 12:40에 게시됨
Vue 2 슬롯과 커스텀 지시문을 활용한 동적 상품 리스트 컴포넌트 구현
Vue 2에서 컴포넌트의 재사용성을 극대화하기 위해 슬롯(Slots)과 커스텀 지시문(Custom Directives)을 활용하는 방법은 매우 중요합니다. 이번 예제에서는 범용적인 테이블 컴포넌트와 편집 가능한 태그 컴포넌트를 설계하여 실제 상품 관리 리스트를 구현하는 과정을 살펴봅니다.
주요 학습 포인트
컴포넌트 통신: props, $emit, 그리고 v-model을 이용한 양방향 ...
8월 4일 00:00에 게시됨
Vue.js 기반 데이터 바인딩과 디렉티브 활용
Vue.js 시작하기: 기본 설정과 데이터 렌더링
Vue를 사용하기 위해선 먼저 DOM 컨테이너를 준비하고, Vue 라이브러리를 로드한 후 인스턴스를 생성해야 합니다. 아래는 Vue 2 기준의 간단한 예제입니다.
<div id="app">
<p>이름: {{username}}</p>
<p>친구: {{friend.gender}}, {{friend.name}}</p>
</div>
<script src="htt ...
7월 22일 02:10에 게시됨
Vue.js 컴포넌트 통신 방법
컴포넌트 간 데이터 전달 방식
Vue.js에서 컴포넌트 간의 데이터 교환은 애플리케이션 설계의 핵심 요소입니다. 다양한 통신 패턴을 통해 부모-자식 컴포넌트 및 형제 컴포넌트 간의 효율적인 데이터 흐름을 구현할 수 있습니다.
1. Props를 통한 단방향 데이터 흐름
부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 기본적인 방법입니다. 함수 타입의 props는 자식 ...
6월 16일 19:50에 게시됨