뷰 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 개발자 도구 활성화하여 데이터 확인
반응형
'언어 > Vue.js' 카테고리의 다른 글
| 뷰 인스턴스 라이프 사이클 (1) | 2024.01.27 |
|---|---|
| 뷰 인스턴스의 유효범위 (1) | 2024.01.26 |
| 뷰 인스턴스란 - 뷰 인스턴스의 정의와 속성 (1) | 2024.01.25 |
