Vue.js 예제 프로그램입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Vue.js TEST</title>
</head>
<body>
<h1>Vue.js Sample</h1>
<p id="app">{{ message }}</p>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const message = ref('Hello, world!');
return {
message
}
}
}).mount('#app');
</script>
</body>
</html>
5번 줄에서 Vue.js 프레임워크 로드를 위한 스크립트 파일을 로드합니다. 여기서는 unpkg의 CDN을 이용했습니다.
12번 줄은 Vue.js 프레임워크에서 createApp 함수와 ref 함수를 가져와서 정의합니다. 13번 줄에서 createApp 함수를 호출하여 Vue.js 인스턴스를 생성, 프로그램을 시작합니다.
여기서는 ‘app’이라는 ID 값을 가진 요소를 찾아서, 해당 요소에서 ‘message’라고 정의된 부분에 ‘Hello, world!’라는 값을 넣는 예입니다.
샘플 링크는 다음과 같습니다.
https://pjw48.net/samp/vuejs_sample.html
이 샘플 링크를 보시면, p 태그의 {{ message }}라고 적힌 부분이 Hello, world!로 바뀌어 나오는 것을 알 수 있습니다. (Ctrl-U 키를 눌러 소스 보기 창을 열어 보시면 알 수 있습니다.)
이것은 가장 간단한 예시를 든 것으로, 다양한 함수를 활용하면 각종 프로그램을 만들 수 있습니다.