Vue.js
Vue.js Data와 Method
아이스올리
2024. 4. 5. 18:36
Vue.js에서 Data란?
- 객체 혹은 함수의 형태로 Vue 인스턴스가 사용할 정보를 가지고 있는 속성.
Vue.js에서 Data를 사용하는 이유
- 원할때마다 원하는 값으로 바꾸어 사용하는 반응형 Data이다.
Vue.js에서 Method란?
- Vue 인스턴스가 사용할 함수를 저장하고 있는 속성.
Vue.js에서 Data와 Method 예
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Data와 Method</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ nextYear('안녕') }}
</div>
<script>
new Vue({
el: '#app',
data: {
person: {
name: '홍길동',
age: 34
}
},
methods: {
nextYear(greeting) {
return greeting + '! ' +this.person.name + '은 내년에 ' + (this.person.age + 1) + '살 입니다';
},
otherMethod: function() {
this.nextYear();
}
}
})
</script>
</body>
</html>