Hello Vue.js

1.시작하기

<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

2.Vue앱 생성

 

가장 기본적인 Hello Vue를 출력해보자. 일단 html 상단에 Vue를 사용하겠다고 추가해주고, 

그리고 연결할 html태그를 작성합니다.

 

html

 

이제 Vue를 생성해볼건데 

기본 형태는 Vue 인스턴스를 생성하여 내부에 el 속성과 data 속성을 넣는 것입니다. 

el은 어떤 id를 가진 html 태그에 종속될 것인지를 표기하는 것입니다.

 

SCRIPT

위 html 과 스크립트 의 결과 는 

결과

위와 같이 Vue 내부에 있는 message값을 호출하게 됩니다. 

 

 

 

그리고 브라우저의 JavaScript 콘솔을 열고 app.message를 다른값으로 변경시에 변경된 값에따라 업데이트 되는것도 확인할수 있습니다. 

 

 

html 직접 상호작용하지않고 Vue 앱은 단일 DOM 요소 에 연결되어 DOM요소를 완전히 제어합니다.