728x90
반응형
vueex1.html
<!DOCTYPE html>
<!--
/vue1/src/main/webapp/20220602/vueex1.html
-->
<html>
<head>
<meta charset="UTF-8">
<title>마우스 이벤트</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<!--
기본이벤트 : 태그의 고유의 이벤트 기능. <a href="">.. => 클릭시 href 속성으로 페이지 이동 기본기능
contextmenu.prevent : preventDefault() 함수기능. 기본이벤트를 취소. 무시하도록 설정
@mouseup : 마우스 클릭시 버튼이 올라오는 경우의 이벤트
@mouse.left : 왼쪽 버튼 클릭시
@mouseup.right : 오른쪽 버튼 클릭시
-->
<div id="simple" v-on:contextmenu.prevent="ctxStop" @mouseup.left="leftMouse" @mouseup.right="rightMouse">
<div>
Left Click : 왼쪽으로<br>
Right Click : 오른쪽으로<br>
</div>
<img src="image/foot.jpg" v-bind:style="{position:'absolute',left:pos.left+'px', top:pos.top+'px'}" >
</div>
<script type="text/javascript">
let model = {pos : {left:100, top:100}}
let simple = new Vue({
el : "#simple",
data : model,
methods : { //이벤트 핸들러
ctxStop : function () {}, //기본이벤트 대신 호출되는 함수.
leftMouse : function () { //마우스의 왼쪽버튼 클릭시 호출되는 이벤트 핸들러
if(this.pos.left > 30)
this.pos.left -= 30;
console.log("Move left")
},
rightMouse : function () { //마우스의 오른쪽버튼 클릭시 호출되는 이벤트 핸들러
this.pos.left += 30;
console.log("Move right")
}
}
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28. CSS와 연결하기 (vueex3.html ) (0) | 2022.06.02 |
|---|---|
| [Vue] 28. style 설정하기 (vueex2.html ) (0) | 2022.06.02 |
| [Vue] 28. 외부데이터 처리하기2 (vueex5.html ) (0) | 2022.05.31 |
| [Vue] 28. 외부데이터 처리하기 (vueex4.html ) (0) | 2022.05.31 |
| [Vue] 28. 이벤트 처리하기2 (vueex3.html ) (0) | 2022.05.31 |