Skip to content

V-on

v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다.

간단히, v-model = v-bind:value + v-on:input 라고 이해하자.

Event

이벤트명

설명

click

마우스를 클릭했을 때 실행함

dblclick

마우스를 더블 클릭했을 때 실행함

mouseover

마우스의 포인트가 요소 위로 올라왔을 때 실행함

mouseout

마우스의 포인트가 요소 밖으로 벗어났을 때 실행함

mousemove

마우스의 포인트가 이동했을 때 실행함

mousedown

마우스의 버튼을 눌렀을 때 실행함

mouseup

마우스의 버튼을 놓았을 때 실행함

keydown

키보드의 키를 눌렀을 때 실행함

keyup

키보드의 키를 놓았을 때 실행함

keypress

키보드의 키를 눌렀다가 놓았을 때 실행함

change

요소가 변경될 때 실행함

submit

<Form>

이 제출될 때 실행함

reset

<Form>

이 재설정될 때 실행함

select

<select>의 값이 선택되었을 때 실행함

focus

태그에 포커스가 있을 때 실행함

blur

태그에 포커스를 잃었을 때 실행함

:click .native

:click .stop

:click .prevent

:click .passive

:click .capture

:click .self

:click .once

Mouse

:click .left

:click .right

:click .middle

Keyboard

:keyup .ctrl

:keyup .alt

:keyup .shift

:keyup .meta

:keyup .enter

:keyup .tab

:keyup .delete

:keyup .esc

:keyup .up

:keyup .down

:keyup .left

:keyup .right

Example

html file: 

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p>
</div>

javascript file: 

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

focusout vs blur

focusout 는 의미 그대로 엘리먼트가 포커스를 잃었을 때 발생되는 이벤트이다. 같은 용도로 사용되는 이벤트로 blur 가 있는 것이다. 둘 사이의 차이점은 버블링 여부이다. 버블링은 다른 글을 참고바란다. (http://mygumi.tistory.com/315)

focusout 는 버블링이 일어나고, blur 는 버블링이 일어나지 않는다. 세트로는 {focusin - focusout} 와 {focus - blur} 로 분류된다.

Troubleshooting

Error in v-on handler: "TypeError: instance is undefined"

v-on 이벤트 발생시, parent component 에 $emit으로 이벤트를 방출할 경우, 아래와 같은 메시지가 출력될 수 있다. 

[Vue warn]: Error in v-on handler: "TypeError: this._roisInfos is undefined"

found in

---> <RoisControlPanel> at src/components/Graph/RoisControlPanel.vue
       <VCard>
         <RoisWidgetTemplate> at src/components/Graph/Window/roisWidgetTemplate.vue
           <RoisWidget> at src/components/Graph/RoisWidget.vue
             <VThemeProvider>
               <VDialog>
                 <VCard>
                   <VgDetailSetting> at src/components/VisualGraph/vgDetailSetting.vue
                     <Pane>
                       <Splitpanes>
                         <VgMain> at src/pages/Main/project/setting/vgMain.vue
                           <ProjectPage> at src/pages/Main/project/ProjectMain.vue
                             <VMain>
                               <VApp>
                                 <AnswerMainPage> at src/pages/Main/AnsMain.vue
                                   <VApp>
                                     <App> at src/App.vue
                                       <Root>
vue.esm.js:628
TypeError: this._roisInfos is undefined

부모 컴포넌트의 에러 코드는 다음과 같다. 

@Component
export default class RoisWidget extends Vue {
  private _roisInfos = new BaseRois.RoiInfoDictionary();
  // ..
}

위의 _roisInfos를 prop에 추가해 주면 된다. 

  @Prop({ type: BaseRois.RoiInfoDictionary, default: new BaseRois.RoiInfoDictionary() }) _roisInfos;
  // ..
}

See also

Favorite site