CDN을 통한 Hello World 구현
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>스크립트 태그를 통해 CDN에서 직접 Vue를 사용할 수 있다. CDN에서 Vue를 사용하는 경우 "빌드 단계"가 필요하지 않아 설정이 훨씬 간단해지며 정적 HTML을 향상시키거나 백엔드 프레임워크와 통합하는 데 적합하다. 하지만 싱글 파일 컴포넌트(SFC) 구문은 사용할 수 없다.
note!
CDN(Content Delivery Network)이란?
콘텐츠 전송 네트워크(CDN)는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크
예제코드
<!DOCTYPE html> <html lang="en"> <head> <title>Hello Vue 3 CDN</title> <!-- 스크립트 태그를 통해 CDN에서 직접 Vue를 사용 --> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <style> .app { font-size: 3em; } </style> </head> <body> <div class="app"> <!-- HTML 코드에서 Vue 변수 접근 시 중괄호 필요 '{{}}', 선언적 랜더링(Declarative Rendering) --> {{ msg_hello }} </div> <script> // App 객체 생성 const App = { data() { return { // 변수 선언 및 값 설정 msg_hello: 'Hello Vue 3 CDN' } } } Vue.createApp(App).mount('.app') </script> </body> </html>
실행결과
선언적 랜더링 <=> 명령형 랜더링
선언적 랜더링(Declarative Rendering) : 백그라운드에서 자동으로 변수의 변화(상태, 속성)를 알아차려 자동으로 업데이트 되는 방식(Vue, React 등)
명령형 랜더링(Imperative Rendering) : 동작을 일일이 명령하는 방식(jQuery 등)
참고 사이트
'Frontend > Vue3' 카테고리의 다른 글
| [Vue 빠른시작] 반응형 기초 예제 추가(Options API.ver) (1) | 2024.01.12 |
|---|---|
| [Vue 빠른시작]템플릿 문법 예제 추가 (0) | 2024.01.11 |
| Vue 번들 Apache Tomcat을 이용하여 배포하기 (0) | 2024.01.09 |
| Vue3 set up 가이드(기본 프로젝트 생성) (2/2) (0) | 2023.04.06 |
| Vue3 set up 가이드(환경설치) (1/2) (0) | 2023.04.06 |