https://www.w3schools.com/html/default.asp
HTML Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML
CSS
JAVASCRIPT
SQL
PHP
BOOTSTRAP 등을
잘 설명한 사이트 이다.
v-on 메소드는 해당 이벤트태그에서 'on'을 제거하고 사용하면 된다.
간단한 이벤트 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.in {
background-color : red;
color : yellow;
}
.out {
background-color : yellow;
color : red;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
data1 : 0,
data2 : 0,
result1 : 0,
inOutCss : 'out'
},
methods : {
btnEvent : function(){
alert('버튼을 눌렀습니다')
},
imageEvent : function(){
alert('image click event')
},
addNumber : function(){
this.result1 = this.data1 + this.data2
},
inEvent : function(){
this.inOutCss = 'in'
},
outEvent : function(){
this.inOutCss = 'out'
}
}
})
}
</script>
</head>
<body>
<div id="test1">
<button type='button' v-on:click='btnEvent'>버튼</button>
<button type='button' @click='btnEvent'>버튼</button>
<br/>
<img src='./img/logo.png' width='200' @click='imageEvent'/><br/>
<hr/>
data1 : <input type='number' v-model.number='data1'/><br/>
data2 : <input type='number' v-model.number='data2'/><br/>
<button type='button' @click='addNumber'>숫자 더하기</button>
<h3>결과 : {{result1}}</h3>
<h3 v-bind:class='inOutCss' @mouseenter='inEvent' @mouseleave='outEvent'>문자열</h3>
</div>
</body>
</html>
data1 :
data2 :
결과 : {{result1}}
문자열
728x90
'ETC > Vue.js' 카테고리의 다른 글
| [Vue.js] 새로고침 / 뒤로가기 방지 및 확인 창 / 사이트를 새로고침하시겠습니까? (0) | 2023.02.08 |
|---|---|
| v-show 조건부 랜더링 (0) | 2022.12.28 |
| Vue.js DB 엔터값 줄바꿈 css style 태그로 초간단 출력하게 하기 (0) | 2022.12.21 |
| v-bind + 이벤트 핸들링 정리잘하신 블로그 (1) | 2022.12.21 |
| v-for 태그를 반복할 수 있다 (0) | 2022.12.19 |
댓글