jhhan의 블로그

Vue.js 기초(1)_인스턴스 본문

Vue.js

Vue.js 기초(1)_인스턴스

jhhan000 2020. 4. 7. 13:59

이번에는 Vue.js에 대해 알아보겠습니다.

[Do it! 예제로 이해하고 실전프로젝트로 완성한다! Vue.js입문] 책으로 진행합니다.

 

{

참고로 Vue.js 설치 관련해서는 지금은 아니고 나중에 쓰겠습니다.

뷰 파일의 경우 .html파일이 아닌 .vue파일로 진행합니다.

}

 

뷰 프로젝트를 하나 만드시면 다음과 같은 화면을 얻을 수 있습니다.

App.vue

기본으로 제공되는 코드이고 이것을 실행시키기 위해서는 

Terminal을 연 후 vue 프로젝트 파일로 이동한 후 'npm run serve'를 입력하시면 작동합니다.

그후 Terminal에 보이는 (포트번호가 포함된)주소를 입력하시면

다음과 같은 화면을 얻으실 수 있습니다.

 

.vue 파일에서는 <template>, <script>, <style> 3가지 부분으로 나뉩니다.

<template>에는 우리가 알던 <html>코드를 입력할 수 있습니다.

단 ,

<template>

    <div>

    </div>

</template> 

처럼 template 안에는 하나의 큰 div만 들어갈 수 있습니다. 

즉, 하나의 root 태그만 들어갈 수 있습니다. 2개 이상이 된다면 오류가 생깁니다.

<script>에는 스크립트를 다룰 수 있는 것들이 들어갑니다.

저희가 보통 알던 <script>와는 조금 다르긴 하지만, 느낌은 비슷합니다...

<style>에서는 디자인을 할 수 있습니다.

css의 내용을 넣어서 사용 가능합니다. 디자인에 관심이 없으시면 빈칸으로 해도 됩니다.

 

간단한 예제를 살펴보겠습니다.

아까의 파일을 이런식으로 바꾼 후 다시 살펴보면

이렇게 생략된 간단한 화면을 얻을 수 있습니다.

script 부분에서 

name은 파일의 이름(인것으로 알고 있습니다..)이고

data에 값들을 넣어서 화면에 출력할 수 있게 합니다.

그리고 출력은 {{ message }} 처럼 중괄호 2개를 써서 사용합니다.

 

Vue 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본단위입니다.

위와 같이 <div id="app"></div>부분을 인스턴스 라고 볼 수 있습니다..(여기는 잘 모르겠습니다.)

뷰 인스턴스에는 라이프 사이클이 존재합니다.

생성, 부착, 갱신, 소멸의 4단계가 존재하고, 속성에는 8가지가 있습니다.

  • beforeCreate: 가장 처음으로 실행되는 라이프 사이클 단계
  • created: beforeCreate 다음에 실행되는 단계. data 속성과 methods 속성이 정의됩니다.
  • beforeMount: 
  • mounted: 지정한 화면요소에 인스턴스가 부착되고 나면 호출되는 단계
  • beforeUpdate:
  • updated: 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
  • beforeDestroy:
  • destroyed: 뷰 인스턴스가 파괴된 후 호출되는 단계

8가지 단계가 있습니다. 이런 단계가 있다는 것을 알아두면 좋을 것 같습니다.

이것을 적용해 본다면

이렇게 코드를 추가한 후 실행을 한다면

로그 창에 나타나는 것을 볼 수 있습니다. (F12를 누르시면 볼 수 있습니다.)

또 아까의 코드에서 다음과 같이 추가한다면

화면처럼 Hello Vue.js에서 Hello Vue!로 바뀌었고, 로그 창에도 updated가 뜨는 것을 확인할 수 있습니다.

 

이 부분들은 라이프 사이클을 잘 활용하시면 더 좋은 결과를 얻을 수 있을 것입니다.

 

 

다음에는 Component에 대해 알아보겠습니다.

 

'Vue.js' 카테고리의 다른 글

Vue.js_기초_설치관련  (0) 2020.04.12
Vue.js 기초(5)_심화  (0) 2020.04.10
Vue.js 기초(4)_템플릿  (0) 2020.04.09
Vue.js 기초(3)_라우터  (0) 2020.04.08
Vue.js 기초(2)_Component  (1) 2020.04.07
'Vue.js' Related Articles more