vue 설치 및 렌더링

vue 시작

 

1. install

 1) CDN 삽입

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

OR

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

2) CLI 설치

npm install -g @vue/cli
# OR
yarn global add @vue/cli

/설치하고자하는 directory에서 다음 명령어 입력
vue create 프로젝트명

 

 

2. 선언적 렌더링

: new Vue 인스턴스 구문 안에 여러 가지 요소들을 선언하게 되면 DOM에 렌더링시킬 수 있다.

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',                //vue에 담고 싶은 element는 app이라는 id를 가졌다.
  data: {                    
    message: 'Hello Vue!'
  }
})