02 개발환경 설정 및 첫 번째 프로젝트
02-1 뷰 학습을 위한 개발환경 설정하기
node v12, npm v6 with IntellJ
02-2 Hello Vue.js 프로젝트 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data : { //데이터 속성
message : 'Hello Vue.js!'
}
});
</script>
</body>
</html>이를 크롬에서 띄워보면 Hello Vue.js! 문구가 보이게 된다.
위 그림에서 보이는 Root는 최상위 컴포넌트로, 뷰 어플리케이션을 실행할 때 가장 근간이 되는 컴포넌트이자 최상위 컴포넌트를 의미한다.
결론적으로는, 화면상 표시된 'Hello Vue.js!' 문구는 최상위 컴포넌트(Root)의 data 속성인 message의 값이다.
ෆ 𝓋𝒾𝓈 𝓉𝒶 𝓋𝒾𝑒 ෆ