728x90
반응형
1. v-on : 이벤트와 메서드를 연결합니다.
▷ 메서드(명령문)은 Vue 인스턴스에 methods 옵션을 추가해서 만듭니다.
new Vue({
el: "#ID명",
data:{
프로퍼티명1: 값1,
프로퍼티명2: 값2
},
methods:{
메서드명: function(){
처리내용
},
메서드명: function(){
처리내용
}
}
})'v-on:'을 생략하고 '@'를 사용해도 됩니다.
◎ 버튼을 클릭하면 1씩 증가하는 예제(v-on click)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>클릭하면 1씩 증가하는 예제</h2>
<div id="app">
<p>{{ count }}</p>
<button v-on:click="countUp">1씩증가</button>
</div>
<script>
new Vue({
el: '#app',
data:{
count:0
},
methods:{
countUp: function(){
this.count++;
}
}
})
</script>
</body>
</html>버튼을 클릭하면 숫자가 1씩 증가합니다.
이 챕터부터는 함수를 이용해서 숫자의 값을 증가하는 동작을 할 수 있도록 만듭니다!
◎ "좋아~" 버튼을 클릭하면 두 번째는 버튼을 누를 수 없는 버튼 생성 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>클릭하면 두번째는 누를 수 없게 되는 “좋아~” 버튼 예제</h2>
<div id="app">
<button value="good" v-bind:disabled="isClick"
v-on:click="oneClick">좋아~</button>
</div>
<script>
function good(){
alert("좋아~");
}
new Vue({
el: '#app',
data: {
isClick: false
},
methods:{
oneClick: function(){
this.isClick = true;
good();
}
}
})
</script>
</body>
</html>script에 good 이라는 함수를 따로 만들어 준 후 클릭 한 번하면 "좋아~" 알림이 뜨도록 만듭니다.
그리고 v-bind: disabled 값에 false 를 넣어주며 버튼을 비활성화 합니다.
◎ 문제) 두 개의 input을 이용해서 두 수를 입력 받아 큰 수를 출력하는 프로그램 작성합니다.
▷ 버튼(큰 수 계산)
▷ 두 수 중 큰 수를 출력
▷ 만약 같은 수가 입력 되면 알림 : 두 수는 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<label>첫 번째 수를 입력하시오 : <input v-model.number="num1"></label><br>
<label>두 번째 수를 입력하시오 : <input v-model.number="num2"></label><br>
<button v-on:click="bigFun">숫자비교</button>
<p>두 수중 더 큰수는 {{ bigNum }} 입니다.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
num1: 0,
num2: 0,
bigNum: 0,
},
methods: {
bigFun : function(){
if(this.num1 > this.num2){
this.bigNum = this.num1;
} else if(this.num1 < this.num2){
this.bigNum = this.num2;
} else{
alert("두 수는 같습니다");
}
}
}
})
</script>
</body>
</html> <script>
var num1, num2;
function a(num1, num2){
if(num1 > num2){
return num1;
} else if(num1 < num2){
return num2;
} else{
return alert("두 수는 같습니다");
}
}
new Vue({
el: '#app',
data: {
num1: 0,
num2: 0,
bigNum: 0,
},
methods: {
bigFun : function(){
this.bigNum = a(this.num1, this.num2);
}
}
})
</script>두 가지 방법으로 아래와 같은 결과를 출력했습니다.
1. Vue 내부에 함수를 만들어주어 출력할 수 있도록 만듭니다.
2. Vue 외부에 함수를 별도로 만들어 내부에 함수를 생성할 때는 미리 생성했던 함수 값들을 받아옵니다.
여기서 Vue 내부에 함수에 변수들을 사용할 때는 무조건 "this."를 붙여주어야 합니다!!!
아니면 아예 동작하지 않아요,,,ㅎㅎ
◎ 마무리 문제) 더하기, 빼기, 곱하기, 나누기만 가능하도록 만듭니다.
▷ input text안에 숫자 두개를 넣고 버튼을 누르면 아래 text로 결과가 표시되게 할 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>간단한 계산기</h2>
<div id="app">
<label><input v-model.number="num1" placeholder="첫 번째 수를 입력하시오"></label>
<label><input v-model.number="num2" placeholder="두 번째 수를 입력하시오"></label><br><br>
<button v-on:click="plus">덧셈계산</button>
<button v-on:click="sub">뺄셈계산</button>
<button v-on:click="multi">곱셈계산</button>
<button v-on:click="divid">나눗셈계산</button>
<p>결과는 {{ result }} 입니다.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
num1: 0,
num2: 0,
result : ''
},
methods: {
plus : function(){
this.result = this.num1 + this.num2;
},
sub : function(){
this.result = this.num1 - this.num2;
},
multi : function(){
this.result = this.num1 * this.num2;
},
divid : function(){
this.result = this.num1 / this.num2;
}
}
})
</script>
</body>
</html>각각의 함수를 만들어서 원하는 버튼을 누르면 사칙연산의 결과 값이 나오게 만들어줍니다.
◎ 추가 문제) 두 개의 input을 이용해서 두 수를 입력 받아 큰 수와 작은 수를 출력하는 프로그램 작성하세요.
▷ 앞쪽 input에 enter 입력시 두 수중 큰 수 출력
▷ 뒤쪽 input에 alt + k 입력시 두 수중 작은 수 출력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<label>첫 번째 수를 입력하시오.<input v-on:keyup.enter="enter" v-model.number="num1"> </label><br>
<label>두 번째 수를 입력하시오.<input v-on:keyup.alt.k="altK" v-model.number="num2"></label>
<p>{{ num1 }}</p>
<p>{{ num2 }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
num1: 0,
num2: 0,
},
methods: {
enter : function(){
if(this.num1 > this.num2){
alert("두 수중 더 큰수는 " + this.num1 + "입니다.");
} else if(this.num1 < this.num2){
alert("두 수중 더 큰수는 " + this.num2 + "입니다.");
} else{
alert("두 수가 같습니다.");
}
},
altK : function(){
if(this.num1 > this.num2){
alert("두 수중 더 작은수는 " + this.num2 + "입니다.");
} else if(this.num1 < this.num2){
alert("두 수중 더 작은수는 " + this.num1 + "입니다.");
} else{
alert("두 수가 같습니다.");
}
}
}
})
</script>
</body>
</html>enter키를 첫 번째에 넣었기 때문에 첫 번째 텍스트 입력칸에서만 실행이 됩니다.
alt+K키는 두 번째에 넣었기 때문에 두 번째 텍스트 입력칸에서만 실행이 됩니다.
v-on:keyup.alt.k="altK"에서 alt 뒷부분에 k, K, 75(아스키 코드 : K)는 사용할 수 있습니다.
하지만, 107(아스키 코드 : k)는 사용하면 오류가 나타납니다.
키보드의 'k'키는 'K'로 인식합니다. 문자열로 입력하면 자동 변환이 되지만 아스키 코드는 자동 변환이 안되기 때문에 107은 사용할 수 없습니다.
이렇게 v-on에 대해서도 배워봤지만 자바 스크립트나 Vue.js는 오류를 제대로 잡지 않고 일단 실행이 되기 때문에 원하는 결과 값이 출력되지 않는다면 오타 확인을 잘하셔야해요!!
v-on:click을 할 때도 띄워쓰기를 하면 안된다는거!! 항상 주의하세요~
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js 조건(v-if)과 반복(v-for) 2 (0) | 2022.12.26 |
|---|---|
| [java script] Vue.js 조건(v-if)과 반복(v-for) 1 (2) | 2022.12.24 |
| [java script] Vue.js 유저 입력 연결(v-model) (0) | 2022.12.22 |
| [java script] Vue.js 속성(v-bind, a, class) (0) | 2022.12.22 |
| [java script] Vue.js 입문 데이터 표시(new Vue, v-text, v-html) (0) | 2022.12.21 |
