반응형
Vue에서 처음으로 하는 프로그래밍은 당연 "hello world"를 찍어보는 것이겠죠!
index.html에서 모두 작성을 할 수도 있고,
index.html과 mian.js 2개의 파일로 구분해서 사용할 수도 있습니다.
첫번째, index.html 파일 하나에 "Hello World!"를 나타나게 할 때 입니다.
<!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">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el:'#app'.
data:{
message: 'Hello World!'
}
})
</script>
</body>
</html>
두번째, html 파일(index.html)과 javascript파일(main.js)을 나눠서 할 경우
<!-- index.html에 입력되는 내용입니다.-->
<!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">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="./main.js"></script>
</body>
</html>// 자바스크립트에서 작성되는 내용입니다.
// 자바스크립트 파일명은 main.js 입니다.
var app = new Vue({
el: '#app',
data:{
message:'Hello World!'
}
})
결과 화면
이로서 여러분도 첫 프로그램 개발의 시작하게 되었습니다.
하나 하나씩 배워가면서 전문가가 되시기를 기원하겠습니다.
아래 그림처럼 editer와 webpage를 한 화면에 놓고 프로그래밍을 하시면 이해가 더 빠르게 될 것입니다.
반응형