[TIL] Vue 디렉티브

반응형 상태

• 기본 설정의 옵션 API 에서 data 옵션을 사용하여 컴포넌트의 반응형 상태를 선언한다.
• 값은 객체를 반환하는 함수여야 한다. (return)
• 이 객체 내 모든 속성은 해당 컴포넌트 인스턴스에서 최상위에 프락시 되어 노출된다.

export default{
	data() {
    	return { 
          //...
        }
    }
}

메서드 선언

• 컴포넌트 인스턴스에 메서드를 추가하기 위해서 methods 옵션을 사용한다.
• 직접 정의한 메서들를 포함하는 객체이다.
• this 가 컴포넌트 인스턴스를 참조하도록 항상 자동으로 바인딩 한다.
• 화살표 함수는 this 를 컴포넌트 인스턴스로 바인딩하는 것을 방지하므로 사용하는 것을 피한다.

export default{
	data() {
    	return { 
          //...
        }
    },
    //메서드 선언
    methods: {
    	increment(){
             //...
        }
    }   
}

디렉티브

• v- 접두사가 있는 특수한 속성

✍🏻 빌트인 디렉티브	속성
v-text	엘리먼트의 텍스트 컨텐츠
v-html	엘리먼트의 innterHTML
v-show	엘리먼트의 가시성
v-if, v-else-if, v-else	조건부
v-for	엘리먼트나 템플릿 블록의 반복문
⭐️ v-on, @	엘리먼트에 이벤트 리스너 연결
⭐️ v-bind, :	하나 이상의 속성 또는 컴포넌트 prop 을 표현식에 동적으로 바인딩
⭐️ v-model	폼 엘리먼트 또는 컴포넌트에 양방향 바인딩 ( <input>, <select>, <textarea>
⭐️ v-slot	이름이 있는 슬롯 또는 props 를 받을 것으로 예상되는 범위형 슬롯
⭐️ v-once	엘리먼트와 컴포넌트를 한 번만 렌더링하고, 향후 업데이트 생략
⭐️ v-memo	텀플릿의 하위 트리 메모
⭐️ v-cloak	준비될 때 까지 컴파일되지 않은 템플릿을 숨김

이벤트 리스닝

• v-on 디렉티브는 @ 기호로 단축문법을 사용한다.
  v-on:click="handler" === @click="handler"
• v-on + v-bind => v-model
<input :value="text" @input="onInput"> + methods 안 onInput 을 정의 => <input v-model="text">