[ VueJS 01 ] Vue js 적용하기 (Vue 기초)

안녕하세요 코드부기입니다.
이번에는 Vue.js를 화면 상에 적용하는 방법에 대해 알려드리겠습니다.

Vuejs는 브라우저에서 바로 적용해서 사용하실 수 있습니다. 기존 프로젝트에 추가로 적용되더라도 전혀 충돌없이 함께 사용할 수 있기 때문에 부담없이 시작할 수 있습니다.

unpkg를 통해서 CDN주소를 제공해주고 있기 때문에 처음에 가볍게 적용하려면 아래 주소를 HTML페이지에 추가해주세요.

현재 크롬브라우저를 사용중이시라면 아래 링크를 눌러서 vue-devtools를 설치해주세요.

Vue devtools 링크
여기를 클릭해주시면 크롬 확장 프로그램으로 이동하게 됩니다. 그럼 Vue devtools를 깔게 되면
아래와 같은 화면이 F12개발자모드에서 vue탭에 활성화 됐을 겁니다.

Vuejs devtools의 장점은 실시간으로 데이터 입력 값에 반응한다는 점입니다.
만약 데이터 바인딩된 입력란에 다른 값을 넣어주면
실시간으로 Vue.js devtools의 data부분이 변화할 것입니다.

Vuejs가 적용될 DOM(Element)을 만들어줍니다.

다음과 같은 html파일을 하나 생성해줍니다.

중간에 보시면 script태그로 CDN주소가 감싸져 있습니다.

이 라인을 추가해주셔야 Vue가 정상적으로 작동하게 됩니다.

그리고 html파일을 크롬 브라우져로 엽니다.

그러면 다음과 같은 브라우져 화면이 보일 것 입니다.

<Vue가 정상적으로 적용된 화면>

다음과 같이 옆에 개발자 모드의 Vue탭을 틀어주시면 message라는 data 속성값에
"Hello world"라는 값이 입력된 것을 확인해 볼 수 있습니다.

이때 message값을 바꿔준다면 vue-devtools는 실시간으로 데이터를 확인하여
데이터 바인딩 된 값을 변경하여 보여줍니다.

Vue-devtools는 데이터 바인딩 된 값을 바로바로 확인해볼 수 있을 뿐만 아니라
나중에 차차 배우게 될 Vuex 의 state값을 파악하는 데에도 큰 도움이 될 것이므로 vue로 개발하는 사람들은 모두 차근차근 익혀두는 것이 좋습니다.

다음엔 Vue의 설치방법에 대해서 알려드리겠습니다.

감사합니다.

Header

CodeBoogie 's Code( 코드부기 코딩 )

[ VueJS 01 ] Vue js 적용하기 (Vue 기초)