이벤트수식어, 폼입력바인딩, v-model, 컴포넌트 기초와 상속

@click.prevent="handler"

.prevent 는 태그동작만 막는다.

.once 는 console동작을 1회만 한다.

 

@click.stop 은 곂치는요소중 .stop이 적용된 요소만 작동된다.

@click.capture // 부모요소에 적용 // 곂치는요소 누를시 부모요소(뒤) 먼저 작동후 자식요소(앞)가 작동된다.

@click.self 는 해당하는 영역이며 자기가 노출되는 영역만 정확하게 작동한다.

 

@wheel.passive 는 부하를 줄이기 위해 스크롤과 로직을 따로 처리해준다.

 

@keydown 은 뒤에 .키를 통해 키가 입력되면 작동된다.

event.key에 입력된 값이 저장되고 그값이 눌리면 작동되게된다.

 

폼입력바인딩

 단방향 데이터 바인딩 구조

양방향 데이터 바인딩 구조

양방향 바인딩 v-model은 input값에 들어온값을 뒤에 변수에 할당시킨다.

 

# v-model="msg"는 입력값이 영어에서는 잘되나 모음,자음을 합치는 한글의 경우 기존방식인

{ :value="msg"

  @input="msg=$event.target.value" }를 사용해야한다.

 

v-model 수식어

 v-model.lazy="msg" 와 @change='msg=$event.target.value' 가 같은것

 v-model.trim  앞,뒤 띄어쓰기를 삭제하고 저장한다.

 

컴포넌트

props를 통해 color라고 외부에서 받을수있는 type은 스트링 기본값은 gray인 color을만들어놓는다.

class를 props로 생성하여 삽입할때 :class="{ 클래스명 }" <slot></slot>은 text값으로 사용될 수있다.

부모 vue에서 class나 style이 자식template에 있는 최상위 태그1개에만 적용되므로 inheritAttre를 false를 통해 상속을 거부하고 필요한 요소만 $attrs를 통해 상속하거나 v-bind="$attrs"로 원하는 태그에 전체 상속을 해줄수있다.