[Vue.js] 기초 문법 모음

Vue 컴포넌트 내에서 데이터와 DOM 요소를 제어하는 데 사용됩니다.

<FForm
		id="searchForm"
		ref="refSrchForm"
		v-model="searchForm"
		search
		:init-value="initObj"
></FForm>

 

ref

• ref는 특정 DOM 요소나 컴포넌트를 참조할 수 있는 방법입니다.
• ref="refSrchForm"은 이 DOM 요소를 참조할 수 있는 이름으로 refSrchForm을 지정한다는 의미입니다. 이 ref는 Vue 인스턴스 내에서 접근할 수 있으며, 주로 this.$refs.refSrchForm을 통해 해당 DOM 요소나 컴포넌트를 직접 조작할 수 있습니다.

 

v-model

• v-model은 양방향 데이터 바인딩을 제공합니다. 즉, 템플릿에서 사용자 입력을 받으면 그 값이 Vue 인스턴스의 데이터에 반영되고, 데이터가 변경되면 템플릿의 값도 자동으로 업데이트됩니다.
• v-model="searchForm"은 Vue의 data 속성에 정의된 searchForm과 연결되어, 폼 요소의 입력값이 searchForm에 자동으로 반영된다는 뜻입니다.

 

:init-value="initObj"

• :는 v-bind의 줄임 표현으로, HTML 속성을 Vue 인스턴스의 데이터와 동적으로 바인딩할 수 있습니다.
• :init-value="initObj"는 init-value라는 커스텀 속성에 Vue의 data에 정의된 initObj 값을 바인딩하겠다는 의미입니다.
• 주로 초기값을 설정하는 데 쓰이며, 예를 들어 searchForm의 초기 상태를 initObj로 설정할 수 있습니다.

이 모든 것들이 합쳐져서, searchForm이 초기값(initObj)을 가지고 양방향 데이터 바인딩을 통해 사용자 입력을 처리하고, 필요한 경우 ref를 통해 폼 요소에 접근해 추가적인 조작을 할 수 있게 됩니다.

 

 

 

😊 잘못된 내용이 있다면 언제든지 댓글로 남겨주세요 😊