[Vue.js | Vue 2] Getting started with vue.js
vue.js 시작하기
Getting started with vue.js
vue.js는 대화형 웹 인터페이스, JS 프레임워크입니다.
vue.js is an interactive web interface and JS framework.
vue.js는 MVVM의 디자인 패턴을 사용합니다.
vue.js uses the design pattern of MVVM.
View - View Model - Model
vue.js를 개발하는 방법은 여러 가지가 있지만 우리는 CDN 방식을 사용합니다.
There are many ways to develop vue.js, but we use the CDN method.
CDN : Content Delivery Network (콘텐츠 전송 네트워크)
뷰의 특징
Features of Vue
- Virtual DOM
- data binding
- component
- event-handling : v-on
- animation and effect
- routing
<head> 태그 내부에 '<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>' CDN을 추가합니다.
Add the vue.js CDN inside the <head> tag.
Vue.js 개발의 시작은 Vue 객체를 생성하는 것에서 시작합니다.
Vue.js development starts with creating a Vue object.
Vue 객체의 내부 구성은 JavaScript의 객체 구성과 동일합니다.
The internal structure (or organization) of a Vue object is the same as a JavaScript Object.
<!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>Document</title>
<!--Vue library 추가-->
<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 상용버전, 속도와 용량이 최적화됨. -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script>
window.onload = function () {
// Vue 라는 객체를 생성
var test1View = new Vue({
el : '#test1', // html의 엘리먼트를 캐치한다.
data : {
message : '첫 번째 Vue.js 애플리케이션' // 바인딩한다.
}
})
}
</script>
</head>
<body>
<div id="test1">
<h1>{{message}}</h1>
</div>
</body>
</html>감사합니다.
'JS > vue' 카테고리의 다른 글
| [Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기 (0) | 2022.02.11 |
|---|---|
| [Vue.js] Vue CLI 프로젝트, vuetify 설치하기 (0) | 2022.02.11 |
| [Vue.js] Vue CLI로 시작하기 (0) | 2022.02.11 |
| [Vue.js | Vue 2] Vue.js 시작하기 (입문) (0) | 2022.01.26 |
| [Vue.js] Vue Object - Vue 객체 (0) | 2021.10.28 |