초보자를 위한 VueJs VueJs 부분 데이터 바인딩

이전 블로그/글에서 컴포넌트 생성, 가져오기, 사용 방법을 배웠습니다. 이번에는 컴포넌트에서의 데이터 바인딩에 대해 살펴보겠습니다.

구성 요소 내에서 데이터 사용

구성요소의 데이터 정의
데이터는 data() 함수에 정의되어 객체로 반환됩니다.
예는 다음과 같습니다.

data() {
  return {
    message: 'Hello World!'
  };
}

지시어로 바인딩

v-bind: HTML 속성을 데이터에 바인딩합니다.

<img v-bind:src="imageUrl" alt="Example Image">

v-model: v-model 지시어는 양식 입력에 대한 양방향 데이터 바인딩에 사용됩니다. 입력 값을 Vue 인스턴스 데이터와 동기화된 상태로 유지합니다. 기본적으로 v-model은 @input(변경 사항 수신)과 :value(입력 값 설정)를 결합합니다. 예:

<input v-model="message" />

이것은 다음과 같습니다.

<input :value="message" @input="message = $event.target.value" />

:value와 @input을 별도로 사용하는 방법은 다음과 같습니다.

<input :value="message" @input="message = $event.target.value" />

v-if 지시문은 부울 값을 기반으로 요소를 조건부로 렌더링합니다. 조건이 true이면 요소가 렌더링됩니다. 거짓이면 그렇지 않습니다. 예:

<p v-if="isVisible">This is visible!</p>

v-for 지시어는 요소를 렌더링하기 위해 배열이나 객체를 반복하는 데 사용됩니다. 더 나은 성능을 위해 각 요소에 고유한 키를 부여할 수 있습니다. 예:

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

브이온
v-on 지시문은 요소의 이벤트를 수신하는 데 사용됩니다. 편의를 위해 약어 @를 사용할 수 있습니다. 예:

<button v-on:click="handleClick">Click me!</button>

다음과 같이 단축할 수 있습니다.

<button @click="handleClick">Click me!</button>

위 내용은 초보자를 위한 VueJs VueJs 부분 데이터 바인딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!