TIL 73일차

◆ DOM (Document Object Model)

• 웹 페이지의 구조와 내용을 표현하고 조작할 수 있는 프로그래밍 인터페이스입니다.

• 웹 페이지는 HTML, XML 또는 SVG 문서로 작성되며, 이러한 문서를 구조화하고 요소 간의 관계를 나타내는 트리 형태의 데이터 구조를 생성합니다. 이 데이터 구조를 DOM이라고 합니다.

• 웹 브라우저는 DOM을 사용하여 웹 페이지를 렌더링하고, 개발자는 JavaScript와 같은 프로그래밍 언어를 사용하여 DOM을 조작하여 웹 페이지의 내용이나 스타일 등을 동적으로 변경할 수 있습니다.

◆ Vue.js 지시자(directive)

지시자를 사용하면 DOM 엘리먼트에 특별한 반응성 행동을 지정할 수 있습니다.

◆ v-show

• 조건에 따라 요소의 표시 여부를 제어하는 지시자입니다.
• 조건이 참이면 요소를 표시하고, 거짓이면 숨깁니다.
• CSS의 display 속성을 조작하여 요소의 표시 여부를 변경합니다.
• 렌더링이 완료된 후에도 v-show 지시자를 사용한 요소는 DOM에 계속 남아 있습니다.

<div v-show="isVisible">내용</div>

◆ v-if

• 조건에 따라 요소를 렌더링할지 결정하는 지시자입니다.
• 조건이 참일 때만 요소를 렌더링하고, 거짓일 때는 렌더링하지 않습니다.
• v-if는 조건이 참일 때만 해당 요소를 DOM에 추가하고, 거짓일 때는 DOM에서 제거합니다.
• 조건이 거짓일 때 해당 요소를 전혀 사용하지 않는 경우, 즉 성능상의 이점을 얻고 싶은 경우 사용

<div v-if="isVisible">내용</div>

◆ v-bind

• 양방향 데이터 바인딩을 제공하는 Vue.js 지시자입니다.
• 입력 필드와 같은 폼 요소의 값을 Vue 인스턴스의 데이터 속성과 동기화하는데 사용됩니다.
• 사용자가 입력한 값이 Vue 인스턴스의 데이터 속성에 자동으로 업데이트되고, 반대로 데이터 속성의 값이 변경되면 입력 필드의 값도 업데이트됩니다.
• 축약형 :으로 사용할 수 있습니다.

<img v-bind:src="imageSrc" alt="이미지" /> 또는 <img :src="imageSrc" alt="이미지" />

◆ v-model

정의: 양방향 데이터 바인딩을 제공하는 지시자로, 엘리먼트의 값과 Vue 인스턴스의 데이터 속성을 연결합니다. 주로 입력 요소(input, textarea, select)에서 사용됩니다.

<input type="text" v-model="username" />

◆ v-on

• 사용자가 발생시키는 이벤트(클릭, 마우스 오버, 키보드 입력 등)를 처리하기 위해 사용됩니다.
• 이벤트 발생 시 Vue 인스턴스의 메소드를 호출하거나 특정 표현식을 실행할 수 있습니다.
• 축약형 @으로 사용할 수 있습니다.

<button v-on:click="submitForm">제출</button> 또는 <button @click="submitForm">제출</button>

◆ v-for

• '변수 in 배열/객체' 형태로 지시자를 작성한다. 이를 통해 각 항목에 접근할 수 있습니다.
• 이렇게 생성된 변수는 해당 요소의 범위(scope) 내에서만 사용할 수 있습니다.
• 배열이나 객체의 데이터를 반복하고, 그에 따른 화면 요소를 동적으로 생성할 수 있습니다.