반응형
오늘은 Vue.JS step 5. 메서드(methods)에 대해 포스팅 하려고 합니다.
Vue.JS 인스턴스의 속성중에 methods를 통해 javascript의 function() 메서드를 생성할 수 있습니다.
또한 Vue.JS는 methods 안에 컴포넌트 인스턴스를 항상 참조할 수 있도록 this값을 자동으로 binding합니다.
아래 예제 소스코드를 통해 알아보도록 하겠습니다.
methods.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다.
vue 인스턴스 안에 methods에 함수를 정의합니다.
저는 간단하게 plus, minus의 function()을 정의하였습니다.
인스턴스안에 바인딩된 num 값을 this로 사용하여 값을 늘리고 줄이는 형태의 메서드입니다.
<!-- methods.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<button v-on:click="plus">plus</button>
<button v-on:click="minus">minus</button>
<p>{{num}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message: 'bono915.tistory.com 환영합니다.',
num:0
},
methods:{
plus:function(){
this.num += 1
},
minus:function(){
this.num -= 1
}
}
})
</script>
</body>
</html>
Visual Studio Code에서 data-binding.html를 마우스 우클릭 후 "Open with Live Server"
또는 키보드로 Alt +L + O 실행하면 다음과 같은 브라우저에 결과물이 나타납니다.
아래 그림과 같이 plus 버튼을 클릭하면 하단에 숫자가 +1씩 추가되고
minus 버튼을 클릭하면 하단에 숫자가 -1씩 줄어드는 것을 확인할 수 있습니다.
그리고 개발자 도구에서 Vue 탭을 통해 실제 값을 인스턴스에 존재하는
data의 num값이 변경된다는 것을 확인할 수 있습니다.
지금까지 Vue.JS step 5. 메서드(methods)에 대한 포스팅이였습니다.
반응형
'Develope > Vue.JS' 카테고리의 다른 글
| [Vue.JS] step 7. props 데이터 전달(부모 -> 자식) (2) | 2022.05.16 |
|---|---|
| [Vue.JS] step 6. watch vs computed 비교 (0) | 2022.05.11 |
| [Vue.JS] step 4. 데이터 바인딩(data binding) (0) | 2022.05.04 |
| [Vue.JS] step 3. 컴포넌트(component) (0) | 2022.05.03 |
| [Vue.JS] step 2. 인스턴스(instance) (0) | 2022.04.30 |
