[Vue.js] Vue Object - Vue 객체
Vue 개발은 Vue 객체를 생성하는 것으로 시작됩니다.
Vue development starts with creating a Vue object.
Vue 앱은 Vue 함수에서 Vue 인스턴스를 생성하는 것으로 시작합니다.
A Vue app starts by creating a Vue instance from a Vue function.
Vue object를 생성합니다.
Create a Vue object.
var vm = new Vue({
// options
});Vue 인스턴스를 생성할 때 주로 사용되는 옵션으로 el, data, methods 가 있습니다.
The most commonly used options when creating a Vue instance are el, data, and methods.
'el'은 html 태그 속성을 연결하고, 'data'는 Vue 객체가 지니고 있는 data를 의미합니다. el 요소에 연결된 html 태그 내에서 'data'에 세팅된 'message' 요소를 html 태그내에서 다음과 같은 방식으로 표기하여 출력할 수 있습니다. {{message}}
'el' connects the html tag attribute, and 'data' means the 'data' the Vue object holds. You can display the 'message' element set in 'data' in the html tag connected to the 'el' element in the following way in the html tag. {{message}}
<!-- HTML -->
<div id="app">
{{ message }}
</div>// javascript
var app = new Vue({
el : '#app',
data : {
message : '안녕하세요 vue!'
}
})
안녕하세요 vue!
<!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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = function () {
var test1 = new Vue({
el : '#test1',
data : {
name : '홍길동',
age : 31
},
methods : {
user_info : function() {
return 'name is ' + this.name + ' , age is ' + this.age
}
}
})
}
</script>
</head>
<body>
<div id="test1">
{{user_info()}}
</div>
</body>
</html>
Thank you!
'JS > vue' 카테고리의 다른 글
| [Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기 (0) | 2022.02.11 |
|---|---|
| [Vue.js] Vue CLI 프로젝트, vuetify 설치하기 (0) | 2022.02.11 |
| [Vue.js] Vue CLI로 시작하기 (0) | 2022.02.11 |
| [Vue.js | Vue 2] Vue.js 시작하기 (입문) (0) | 2022.01.26 |
| [Vue.js | Vue 2] Getting started with vue.js (0) | 2021.10.26 |