학습목적
- CDN 방식을 통해 먼저 vue와 친숙해져보자.
- 기본이라 할 수 있는 Options API를 한번 사용해보자.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
<p>{{ courseGoal }}</p>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{ courseGoal }}</p>
</section>
</body>
</html>
- script를 통해 vue를 cdn으로 사용했다.
(js는 defer 프로퍼티를 이용해 화면이 렌더링이 된 이후 실행이 되도록 한다.)
- body안의 {{ courseGoal }} 은 보간법(interpolation) 이라는 vue 특유의 데이터 바인딩 기법이다.
- html과 vue가 결합된 형태에서는 vue가 특수구문을 읽어들여 html을 다르게 파싱하게 한다.
app.js
const app = Vue.createApp({
data() {
return {
courseGoal: '뷰 열심히 공부하기'
}
}
})
app.mount('#user-goal')
- Vue.createApp() 을 통해 Vue에 관한 인스턴스를 만든다.
createApp의 파라미터로는 객체가 들어가며, 객체 내부에는 각기 다른 프로퍼티나 메서드가 올 수 있다.
- data() 메서드는 사용방법이 정해진 메서드로써 객체를 리턴하며, 객체 내부에는 바인딩할 수 있는 데이터들이 속하게 된다.
- 이 인스턴스를 mount라는 메서드와 DOM 취득 요소를 통해 html에 이식할 수 있다.
- 따라서 section의 <p> 태그 내부에는 courseGoal의 Value가 들어가게 된다.
header 부분은 vue 인스턴스가 이식되지 않아 보간법이 실행되지 않았고, section은 vue 인스턴스가 이식되어 보간법이 인식되어있다.
