Vue CDN
🌐 Vue CDN이란?
정의
Vue CDN 방식은 별도 설치 없이 script 태그로 Vue를 불러와 바로 사용하는 방식이다.
작은 예제나 빠른 실습, 간단한 프로토타입을 만들 때 편하다.
🧩 특징
- 설치 과정 없이 바로 시작할 수 있다.
- HTML 파일 하나로도 동작한다.
- Vue의 반응성 API를 바로 확인할 수 있다.
- 규모가 커지면 프로젝트 구조 관리가 어려워진다.
🛠️ CDN 링크
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
⚙️ 기본 포맷
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue CDN</title>
</head>
<body>
<div id="app">
<!-- UI 정의 -->
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const message = ref("Hello Vue!!");
return {
message,
};
},
});
app.mount("#app");
</script>
</body>
</html>
🧪 사용 예시
<body>
<div id="app">
<h1></h1>
<button @click="count++">
Count is : 8
</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const message = ref("Hello Vue!!");
const count = ref(0);
return {
message,
count,
};
},
});
app.mount("#app");
</script>
</body>
🔁 바인딩 예시
Object binding
<div :class="{ active: isActive }">Text</div>
Array binding
<div :class="[activeClass, infoClass]">Text</div>
🖱️ 이벤트 처리
Inline
<button @click="greetings('Hello')">바꾸자</button>
Method
<button @click="increaseNum">+</button>
📌 정리
- Vue CDN은 설치 없이 빠르게 시작하는 방식이다.
createApp,ref, 바인딩, 이벤트 처리 같은 기본을 확인하기 좋다.- 실무 프로젝트보다 학습이나 실험용으로 더 적합하다.
댓글남기기