[Vue] 지금까지 배운 디렉티브 정리 (계속 업데이트 될 예정)

디렉티브	해석
v-on:click="메서드"	클릭했을때 실행할 메서드를 연결해준다
@click="메서드"	v-on:click의 축약형으로 v-on은 @로 대체해 사용할 수 있다
@click.stop	클릭 이벤트가 상위 요소에 이벤트가 전파되는 것을 방지해준다
@keydown.enter="메서드"	input 요소에 enter key를 눌렀을때 (keydown했을때) 연결한 메서드가 실행된다
v-if="조건문"	조건문을 만족할때 (true일때) 해당 요소를 출력 true일때: 해당 요소를 렌더링한다 false일때: 해당 요소를 렌더링하지 않는다
v-for="데이터 in 배열"	배열에 있는 모든 데이터를 반복문을 돌려 순서대로 하나하나 출력 (데이터를 하나씩 출력할때 고유한 key값을 해당 요소에 부여해줘야 한다)
v-once	데이터를 초기에 한번만 렌더링해주는 디렉티브 (데이터가 업데이트되어도 변하지 않는다)
v-html="데이터"	원시 HTML을 변환해 화면에 출력해주는 디렉티브
v-bind:속성이름="속성값"	HTML 속성(id, class, style, type, href, src, key 등)에 데이터를 바인딩할 때 사용하는 디렉티브
v-bind:href="url"	HTML 속성 href에 url이라는 데이터를 바인딩
:href="url"	v-bind:href의 축약형
v-model="데이터"	입력 값이 자동으로 뷰 데이터 속성에 연결되는 디렉티브 input, textarea, select 요소와 같이 사용자가 입력한 값을 받기 위해 사용 (양방향 데이터 바인딩)
v-on:input="데이터"	영어는 v-model로 데이터를 자동으로 바인딩 시킬 수 있지만 한글은 그렇지 않다 입력된 한글 데이터를 바인딩 하고 싶을때 사용한다
@input="데이터"	v-on:input의 축약형
v-show="조건문"	조건문을 만족할때 (true일때) 해당 요소를 출력 true일때: display: none 속성을 제거해준다 false일때: display: none 속성을 부여해준다
v-slot:이름	name 속성을 가진 slot 태그에 해당 컨텐츠를 연결해주는 디렉티브 v-slot 안에 있는 텍스트가 같은 이름을 가진 요소 안의 텍스트로 들어온다
#이름	v-slot의 축약형