[acet-#2] Vue.js 무작정 해보기(용어 등 훝어보기!)

2019. 6. 4. 16:09Front/Vue.js

반응형

# 바로 코딩을 해보고 싶으신 분은 jsfiddle로 쉽게 해볼수 있습니다. 
https://jsfiddle.net/chrisvfritz/50wL7mdz/

# Vue.js의 특징으로 단일 파일 컴포넌트를 들수 있다.
Componet System : Vue의 또 다른 중요한 개념.

# 호환성
Vue는 ECMAScript5 기능을 사용 -> IE8 이하 버전을 지원하지 않습니다.
하지만 모든 ECMAScript5 호환 브라우저를 지원합니다.

# Vue Devtools
  * https://github.com/vuejs/vue-devtools#vue-devtools

 

vuejs/vue-devtools

⚙️ Browser devtools extension for debugging Vue.js applications. - vuejs/vue-devtools

github.com

# 설치
  * https://kr.vuejs.org/v2/guide/installation.html

 

설치방법 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

# Vue 인스턴스
  모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것 부터 시작합니다.
  var vm = new Vue({
     // 옵션
  })

위에서 Vue 인스턴스를 만들고 옵션을 넣는 것이 포인트!
옵션은 Vue인스턴스를 인스턴스화 할 때 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등이 있음.
일단 그렇구나~하고 넘어가고 하나씩 하나씩 머릿속에 정리해보자!

# 인스턴스 라이프사이클 훅(HOOK)
종류로 created, mounted, updated, destroyed 가 있으며 created 훅의 경우 인스턴스가 생성된 후에 호출된다.

#인스턴스 라이프사이클 다이어그램

 

# 템플릿 문법
  * 문자열
    데이터 바인딩의 가장 기본 형태는 이중 중괄호를 사용한 텍스트 보간 입니다.
   <span> 메시지: {{ msg }} </span>

일단 여기까지 보고! 코딩을 해보도록 하자!

반응형