프로그래밍 언어/Vue.js
뷰 Vue.js 시작하기 - Hello Vue.js ! 프로젝트 만들기
개발하는 채찡
2024. 1. 24. 22:40
728x90
[ Hello Vue.js ! 프로젝트 만들기 ]
⛑️ 프로젝트 작업 순서
1) HTML 파일 생성
2) 뷰 소스 코드 추가
3) 브라우저로 실행
1) HTML 파일 생성
2) 뷰 소스 코드 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>
소스를 해석해보면,
new Vue () -> Vue 를 만든다.
el: #app -> 'app' 이라는 id 를 가진 엘리먼트에.
data : {..} -> data 에 정의한 데이터를 넘긴다.
3) 브라우저로 실행
해당 파일 실행시 message 가 출력되는 것 확인
* Vue 개발자 도구 활성화하여 데이터 확인
반응형