v-on
- v-bind와 마찬가지로 지정된 해당 태그의 속성값을 지정하는 데 사용되는 디렉티브다.
- @는 v-on:의 축약표현, v-on:click=“doSomething”을 줄여서 @click=”doSomething” 이라고 표기해줄 수 있다.
<body>
<button v-on:click="btnclk()">클릭</button><br/>
<button @:click="btnclk2()">클릭</button><br/>
<script>
const app = Vue.createApp({
methods:{
btnclk:function(){
alert('button click')
},
btnclk2:function(){
alert('button2 click')
}
}
})
app.mount('#app');
</script>[v-on] : input
v-on:input 은 키다운 개수를 카운트 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script>
</head>
<body>
<div id="app">
<input type ="text" v-on:input="cnt2++" placehoder="키를 입력하세요">cnt2:{{cnt2}}
</div>
<script>
const app=Vue.createApp({
data(){
return{
cnt2:0
}
}
})
app.mount("#app");
</script>
</body>
</html>[v-on] : v-for에 v-on 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script>
</head>
<body>
<div id="app">
<div style = "border:1px solid black">
<img v-bind:src="initImg" style ="width:200px;height:200px;">
<ul>
<li v-for="img in imgs" v-on:click="initImg=img.url">{{img.title}}
</li>
</ul>
</div>
<script>
const app=Vue.createApp({
data(){
return{
initImg :'../imgs/a.jpg'
imgs:[
{title:'a.jpg', url:'../imgs/a.jpg'},
{title:'111.png', url:'../imgs/111.png'},
{title:'아이.png', url:'../imgs/아이.png'},
{title:'21.png', url:'../imgs/21.png'}
]
}
}
})
app.mount("#app");
</script>
</body>
</html>return 초기 이미지 값(initimg)을 설정해 주고 v-on:click="initImg=img.url" 란 {{img.title}} 을 클릭할 때 초기 이미지로 주었던 값을 v-for="img in imgs" 에 있는 img.url 로 바꿔 달라는 의미이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js">
</script>
</head>
<body>
<div id="app">
<h3>{{msg + ': x = ' + x + '/ y =' + y }}</h3>
<button v-on:click="a">글작성</button>
<!-- v-on:click="a"의 a에 () 가 없으면 methods:{ //메소드 정의 영역 -->
<!-- a(){ -->
<!-- this.msg="hello"; -->
<!-- }, 이렇게 메소드 작성 가능 -->
<button v-on:click="b()">글지우기</button><br/>
<div style="width:200px;height:200px; border:1px solid black" v-on:mousemove="c">
v-on:mousemove="c" 원하는 이벤트 핸들러 이렇게 적어줘도 됩니다링
이 영역 안에서 마우스를 움직이세요~
</div>
<!-- 반대로 v-on:click="b()"의 b에 () 이게 있으면 b:function(){ -->
<!-- this.msg=''; -->
<!-- } 으로 사요 ㅇ가능 -->
파라미터를 지정안하면 <v-on:mousemove="c"> 이런식으로 그러면 메소드에 c(e) or a() 이렇게 파라미터를 넣어서 보내줘야한다.
</div>
<script>
const app =Vue.createApp({
data(){
return{
msg:'',
x:0,
y:0
}
},
methods:{ //메소드 정의 영역
a(){
this.msg="mouse moveeeee";
// 값을 할당하지 않고 사용한다는 scrtipt 언어의 특성상
// this안 쓰면 이게 어디에서 클릭한 메세지를 불러와야하는지 모름.
},
b:function(){
this.msg='';
},
c(e){ //e: 발생할 이벤트 객체
this.x=e.offsetX;
this.y=e.offsetY;
}
}
});
app.mount("#app");
</script>
</body>
</html>'vue' 카테고리의 다른 글
| vue에 ttf 형식 폰트 적용하기 (0) | 2023.08.22 |
|---|---|
| [Vue.js] dayjs 날짜 제약 조건 feat. 이전 날짜 선택 불가 (0) | 2023.08.18 |
| Vue 프로젝트 생성 및 환경설정 (0) | 2023.06.15 |
| Spring 과 vue 연동 (0) | 2023.06.09 |
| vue cmd 창에서 axios / router 추가하여 새 프로젝트 생성하기 (0) | 2023.06.07 |
