Vue.js
https://kr.vuejs.org/v2/guide/installation.html
설치방법 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
CDN
프로토 타이핑또는 학습 목적이라면, 아래 코드로 최신 버전을 사용할 수 있습니다.
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
프로덕션 환경인 경우 새 버전에서 예상치 못한 오류를 방지하려면 특정 버전의 빌드 파일을 추가하는것을 추천합니다.
| <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script> |
기본 ES 모듈을 사용하는 경우 이를 지원 하는 ES 모듈 호환 빌드 파일도 있습니다.
| <script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js' </script> |
<!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">
<title>다양한 데이터의 출력</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h2>다양한 데이터의 출력</h2>
<div id="app">
<p>{{ myText }}</p>
<p v-text="myText"></p>
<p v-html="myHtmlText"></p>
<p> 숫자 {{ myNumber }}</p>
<p> 부울형 {{ myBool }}</p>
<p> 배열 {{myArray }}</p>
<p> 오브젝트 {{ myObject }}</p>
<p>{{ $data }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
myText: 'Vue를 배워 봅시다. 이렇게 그냥 출력할수도 있고',
myHtmlText: '<h3> 태그를 넣어서 출력할 수도 있습니다.</h3>',
myNumber: 12345,
myBool: true,
myArray: [1, 2, 3, 4, 5],
myObject: [
{ name: '다즐링', price: 600 },
{ name: '얼그레이', price: 500 },
{ name: '실론', price: 500 }
]
}
})
</script>
</body>
</html>위의 코드와 같이 <head></head>안에 넣어준다.
Jiwon's develop moment
'JavaScript > vue' 카테고리의 다른 글
| 🔥component - 부품으로 정리 (0) | 2022.12.13 |
|---|---|
| count (0) | 2022.08.09 |
| Vue instance 생성 (0) | 2022.08.09 |
| Vue.js (0) | 2022.08.09 |