FRONT-END

@click.prevent="handler"

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

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

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

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

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

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

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

폼입력바인딩

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

{ :value="msg"

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

v-model 수식어

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

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

컴포넌트

태그에 v-if로 boolean값으로 조절할시 html요소에 렌더링되지도않는다.

하지만 태그에 v-show로 boolean값을 조절할시 html요소에 나타나며 display:none의 스타일값으로 형태가 된다.

index값을 map(index)로 매개변수 없이 생성하는법

@click 등 이벤트 객체에서 매개변수받는법

beforeCreate: App.vue의 전체 컴포넌트(소스)가 작성되기 전

created : App.vue의 전체 컴포넌트(소스)가 작성 된 후

beforeMount: template의 html요소에 연결되기 전

Mounted: template의 html요소에 연결된 후

<h1 v-once> 화면에 보이는 값에서 더이상 변화시키지 않는다.

<h1 v-html='mesage'> message에 할당된 html소스를 h1에서 그대로 받아 html문으로 출력시킨다.

<h1 :class="msg"> h1에 class를 추가할시

Getter 와 Setter

watch