🌱 CDN으로 간단히 Vue 앱 만들어보기
🔰 Vue란?
Vue.js는 사용자 인터페이스(UI)를 만들기 위한 프로그레시브 프레임워크입니다. 작고 가볍지만 점진적으로 복잡한 기능도 덧붙일 수 있어 입문자와 전문가 모두에게 인기 있는 프론트엔드 도구입니다.
🚀 CDN으로 시작하는 가장 쉬운 Vue 앱
Vue를 가장 빠르게 시작하는 방법은 별도 빌드 도구 없이 CDN 링크를 통해 HTML 파일 안에 바로 Vue를 불러와 사용하는 것입니다.
예제 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Vue CDN 예제</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
<button @click="reverseMessage">뒤집기</button>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: '안녕하세요 Vue!'
};
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
}
}
}).mount('#app');
</script>
</body>
</html>
📌 위 코드를 .html 파일로 저장하고 브라우저로 열면 바로 Vue가 작동합니다.
💡 요약
- Vue는 작은 시작이 가능한 점진적 프레임워크입니다.
- CDN 방식은 학습용/테스트용으로 가장 빠르게 Vue를 체험할 수 있습니다.
- 실무에서는 Vite, Vue CLI 등 빌드 도구와 함께 사용하는 것을 권장합니다.
'framework_library > vue' 카테고리의 다른 글
| 🌿 Vue.js 컴포넌트 선언과 등록 방식 (전역, 지역) (0) | 2025.05.01 |
|---|---|
| 🌱 Vue.js 반응형 데이터 이해하기 - reactive와 ref의 차이점 완전정복 (1) | 2025.05.01 |
| 🌱 Vue.js 시작하기 - 템플릿 문법 완전정복 (0) | 2025.05.01 |
| 🌱Vue.js 시작하기 - 프로젝트 생성 (Vite vs Vue CLI) (0) | 2025.05.01 |
| 📚Vue.js란 무엇인가 – 점진적 프레임워크로 시작하는 프론트엔드 개발 | MMVM패턴 (0) | 2025.04.08 |
댓글