개요

Vue.js로 Hello World 찍어보기

시작

1. new file -> index.html 생성
2. 코드 작성
   2-1. Vue 인식할 수 있도록 공식문서에서 라이브러리 가져오기
   
   위치 : Quick Start 클릭 -> 스크롤 내리면 Using Vue fron CDN

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

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

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello Vue3'
      }
    }
  }).mount('#app');
</script>

3. 우클릭 -> Open with Live Server 클릭 ->브라우저에 입력한 data 출력 되는 것 확인

   안되면 아래 글 참고하시기 바랍니다.
   [오류]VSCode Open with Live Server 안 열림

4. 브라우저에서 우클릭 검사 클릭
   
5. 우측에 Vue - App1 - Root 클릭 시 data - message 확인 가능
   
6. message 우측에 Edit value 클릭하여 글자 변경하고 엔터치면 화면에 보이는 문자열 데이터도 바뀐다.

이렇게 데이터의 변화에 따라서 UI 값이 바뀌는 것이 바로 뷰가 추구하는 리액티비티라고 하는 개념이다.

참고

인프런 - 캡틴판교