Vue란?
Directive (지시자)
Vue Events
vue event 는 vue의 디렉티브(지시자) 중 하나인 'v-on' 또는 '@' 기호를 사용하여 이벤트 처리를 할 수 있다. vue events 디렉티브의 기능은 Dom 이벤트를 감지하고 Vue 인스턴스의 메소드와 연결하는 것이다.
v-on:click
<button v-on:click="cnt++">click</button>
<button @:click="cnt++">click</button>
<body>
<div id="app">
<h3> 버튼을 누르시오</h3>
cnt:{{cnt}}<br/>
<button v-on:click="cnt++">click</button>
<!-- <button @:click="cnt++">click</button> -->
</div>
<script>
const app = Vue.createApp({
data(){
return{
cnt:0
}
}
})
app.mount('#app');
</script>
</div>
v-on:click (함수 호출)
v-on:click="a" 코드는 이벤트 핸들러로써 a() 메서드 함수를 호출하는 형태로 이벤트 핸들러를 지정한다. 그래서 클릭 이벤트가 발생하였을 때 a() 메서드를 호출한다.
v-on:click="a()" 도 이벤트 핸들러로써 a()메서드 함수를 호출하는 형태이다.
두 코드의 차이점은 a코드는 메서드 이름만을 이벤트 핸들러로 지정하여 클릭 이벤트가 발생하면 a메서드를 호출한다. 메서드 이름 뒤에 ()가 없어 이벤트가 발생했을 때 메서드를 참조하는 것을 의미한다.
<div id="app">
<h3>{{msg}}</h3>
<button v-on:click="a">글작성</button><button v-on:click="b">글지우기</button><br/>
</div>
<script>
const app = Vue.createApp({
data(){
return{
msg:'',
x:0,
y:0
}
},
methods:{//메서드 정의 부분
a(){
this.msg = 'hello mouse move';
},
b(){
this.msg = '';
},
c(e){//e:발생한 이벤트 객체
this.x = e.offsetX;//마우스 x좌표
this.y = e.offsetY;//마우스 y좌표
}
}
})
app.mount("#app");
</script>
v-on:input
input 으로 지정해주면 해당 입력양식의 대표이벤트를 처리한다. 즉, 아래의 코드에서는 키보드 입력 이벤트가 발생할때마다 카운트가 증가한다.
<input type="text" v-on:input="cnt2++" placeholder="키를 입력하시오">cnt2:{{cnt2}}<br/>
<div id="app">
<input type="text" v-on:input="cnt2++" placeholder="키를 입력하시오">cnt2:{{cnt2}}<br/>
</div>
<script>
const app = Vue.createApp({
data(){
return{
cnt2:0
}
}
})
app.mount('#app');
</script>
</div>
v-on:click 배열
return 값에 있는 imgs 배열을 for 문으로 꺼내 img 속에 담고 각 줄을 클릭할 때마다 initImg 를 해당 이미지의 url로 변경한다. 그럼 initImg 속에는 해당 값이 들어가 이미지에 따라 이미지가 바뀌게 되는 코드이다.
<img v-bind:src="initImg" style="width:150px;height:150px;">
<ul>
<li v-for="img in imgs" v-on:click="initImg =img.url">{{img.title}}</li>
</ul>
<div id="app">
<div style="border:1px solid black">
<img v-bind:src="initImg" style="width:150px;height:150px;">
<ul>
<li v-for="img in imgs" v-on:click="initImg =img.url">{{img.title}}</li>
</ul>
</div>
</div>
<script>
const app = Vue.createApp({
data(){
return{
initImg:'../imgs/1.jpeg',
imgs:[
{title:'1.jpeg', url:'../imgs/1.jpeg'},
{title:'2.jpeg', url:'../imgs/2.jpeg'},
{title:'3.png', url:'../imgs/3.png'},
{title:'4.png', url:'../imgs/4.png'},
{title:'5.png', url:'../imgs/5.png'},
]
}
}
})
app.mount('#app');
</script>
</div>
v-on:mousemove
마우스의 움직임을 확인할 때 사용하는 지시자이다. c(e)는 메서드 이름이고, e는 이벤트 객체이다. 이벤트 핸들러 함수에서는 일반적으로 이벤트 객체를 매개변수로 전달받아 사용할 수 있다. 이벤트 객체에는 발생한 이벤트와 관련된 정보들이 담겨있다. v-on:mousemove에서 매개변수를 설정하지 않아도 자동으로 매개변수를 받아온다.
메서드에서 매개변수를 설정하지 않은 경우, 이벤트 객체가 명시적으로 전달되지 않기 때문에 이벤트 객체에 접근할 수 없다.
<div id="app">
<h3>{{': x=' + x + ' / y=' + y}}</h3>
<div style="width:200px;height:200px;border:1px solid black" v-on:mousemove="c">
이 영역안에서 마우스를 움직이시오
</div>
</div>
<script>
const app = Vue.createApp({
data(){
return{
msg:'',
x:0,
y:0
}
},
methods:{//메서드 정의 부분
c(e){//e:발생한 이벤트 객체
this.x = e.offsetX;//마우스 x좌표
this.y = e.offsetY;//마우스 y좌표
}
}
})
app.mount("#app");
</script>
파라메터로 이벤트 값 전달
a(1), a(2), a(3) : 클릭이벤트 핸들러 'a'를 지정하고 각자 다른 파라메터 값을 전달한다.
b : 클릭 이벤트 핸들러 b를 지정하고, 파라미터를 e로 설정한다. (자동으로 이벤트 객체가 전달되도록 동작) 버튼을 클릭하면 b 메서드가 호출되고, 이벤트 객체 e를 통해 클릭된 버튼의 id속성 값을 알 수 있다.
c($event, 'hello5') : 이벤트 핸들러 c 를 지정하고 두개의 값을 전달한다.c 메서드의 첫번째 파라미터로 e를 설정하여 이벤트 객체를 전달받고 두번째 문자열을 전달한다. 해당 버튼을 클릭하면 c 메서드가 호출되고, 이벤트 객체 e와 전달된 문자열 hello5를 활용하여 메세지를 출력한다.
<div id="app">
<button v-on:click="a(1)">1</button>
<button v-on:click="a(2)">2</button>
<button v-on:click="a(3)">3</button>
<button id="btn4" v-on:click="b">4</button>
<button id="btn5" v-on:click="c($event, 'hello5')">5</button>
</div>
<script>
const app = Vue.createApp({
data(){
return{
}
},
methods:{ //메서드 정의 부분
//값만 전달
a(num){ //num:인자로 전달된 값 저장됨 , 값이 있냐 없냐 차이
alert(num)
},
//이벤트만 전달
b(e){ //파라메터로 지정. 호출할때는 없음. 자동으로 이벤트 객체를 넣음
// 인자 전달 안되면 발생된 이벤트 객체 전달됨
alert(e.target.id) //target:4번 버튼
},
c(e, msg){
alert(e.target.id+":"+msg)
}
}
})
app.mount('#app');
</script>
v-on: 이벤트 수식어
v-on:click.once : 해당 요소의 클릭 이벤트가 한 번만 동작하도록 지정
v-on:keydown : 해당 요소의 키다운 이벤트가 발생했을 때만 이벤트 핸들러가 호출되도록 지정
v-on:keyup.s : 해당 요소의 키업 이벤트가 발생했을 때만 이벤트 핸들러 c 가 호출되도록 지정한다. 이 코드에서 특정 키는 s이다.
<button v-on:click.once="a">첫 번째 클릭만 동작함</button>
<input type="text" v-on:keydown="b">{{val}}<br/>
<textarea v-on:keyup.s="c"></textarea>
<div id="app">
<button v-on:click.once="a">첫 번째 클릭만 동작함</button>
<input type="text" v-on:keydown="b">{{val}}<br/>
<textarea v-on:keyup.s="c"></textarea>
</div>
<script>
const app = Vue.createApp({
data(){
return {
val:''
}
},
methods:{
a(){
alert("첫 클릭임");
},
b(e){
this.val = e.key; //눌린 키 (하나)값을 보여줌
},
c(){
alert('텍스트영역에 s 누름'); //keyup.s 가 키 s 를 눌렀다 떼면 이벤트 발생
}
}
})
app.mount('#app');
</script>