Vue :v-on

v-on

v-on 은 브라우저의 입력 폼 이외에 유저로부터 입력을 Vue에 반영시키느 방법 중 하나이다. v-on 디렉티브는 유저가 버튼을 클릭하거나 키보드를 통해 키입력을 하는 등의 이벤트가 발생할 때 Vue 메소드를 실행시키느 이벤트 핸들러다.

v-on 은 자주 사용되는 디렉티브로 생략할 수 있다. v-on 대신에 @ 사용하고 생략 가능하다.

<!-- 이벤트와 메소드를 연결할 때 v-on -->
<태그명 v-on:이벤트="메소드명">
  
<!-- v-on 생략가능 -->
<a v-on:click="doSomething">
<a @click="doSomething">

method

method는 Vue 인스턴스에 methods 옵션을 추가해서 만든다.
복수개의 경우 컴마 구분으로 나열할 수 있다.

	new Vue({
		el: "#ID명",
		data: {
			프로퍼티명: 값,
          	프로퍼티명: 값 },
      	methods: {
        	메소드명: function() {
              처리내용
            },
          	메소드명: function() {
              처리내용
            }
        }
	})

버튼클릭

<buttion v-on:click="메소드명">

<div id="app">
	<button value="good" v-bind:disabled="isClick" v-on:click="oneClick">좋아요</button>
</div>

function good(){
	alert("좋아요!!!");
}
new Vue({
	el: "#app",
		data: {
		isClick: false
	},
	methods: {
		oneClick: function() {
			this.isClick = true;
			good();
		},
	},
})

키입력

<input v-on:keyup.키수식자="메소드명">

input 태그에 v-on:keyup.enter.shift="showAlert"을 지정하면 [Shift] 키를 누르고 있는 상태에 [Enter] 키를 눌렀을때 메소드가 실행된다.

<div id="app">
	<input v-on:keyup.enter.shift="showAlert" v-model="myText">
	<p>{{ myText }}</p>
</div>

new Vue({
	el: "#app",
		data: {
		myText: 'Hello!'
	},
	methods: {
		showAlert: function() {
			alert("Shift + Enter 눌렀습니다!")
		},
	},
})