Vue Instance 생성해보기
<!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>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script>
new Vue({
el :"#app",
data() {
return {
msg :'안녕하세요',
}
},
})
</script>
</body>
</html>
<결과>
※ vue를 사용하기 위해서 script로 삽입하거나 NPM,CLI를 사용하는 경우가 있는데 일단 script로 삽입해주었다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
이렇게 인스턴스를 생성해 주었다.
| 속성 | 설명 |
| el | Vue가 적용될 요소를 지정해준다. |
| data | Vue에서 사용되는 정보를 저장한다. 객체 또는 함수의 형태이다. |
| template | 화면에 표시할 HTML , CSS등의 마크업 요소를 정의하는 부분이다. |
| methods | 로직 제어와 관계된 methods를 정의한다. |
| created | 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의한다. |
'Web > Vue.js' 카테고리의 다른 글
| v-show 와 v-if 의 차이점 (0) | 2021.05.16 |
|---|---|
| Vue Directives (0) | 2021.05.16 |
| Vue Instance Life Cycle (0) | 2021.05.16 |
| Vue computed 와 method의 차이점 (0) | 2021.05.11 |
| Vue.js 관련 vscode Extension 추천 (0) | 2021.05.10 |
