[12주차] 5. Vue.js

Vue.js

• 작은 화면당 라이브러리 역할부터 큰규모의 웹 애플리케이션 개발을 돕는 프레임워크 역할까지 점진적으로 적용할 수 있는 프런트엔드 프레임워크

특징

• 컴포넌트 기반 개발 방식 : 화면(웹페이지)을 여러 개의 작은 단위로 쪼개어 개발, 리액트와 같은 방식
• MVVM 패턴 : 화면 UI 코드와 백엔드 데이터 처리 코드 분리
• 리액트와 앵귤러의 장점을 흡수

설치 파일

• vue.js devtools
  • 개발자 모드로 할 경우 개발자 도구에서 vue 패널이 보임
• vs code 확장 프로그램 : vetur
• node-v , npm-v 설치 , nvm

html

• body 태그 내에서
  <컴포넌트이름 v-bind: props 속성이름 = “상위 컴포넌트 데이터></컴포넌트이름> <컴포넌트이름 v-on: 하위 컴포넌트에서 발생한 이벤트이름= “상위 컴포넌트 메서드 이름></컴포넌트이름>

- https://kr.vuejs.org/v2/guide/#%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0에서 개발자 모드랑 사용자 모드 중 선택해서 script 태그로 삽입

속성

• template : 컴포넌트 내용 중 template이 브라우저에 나타나게 됨
• method : 함수, ex) this.$emit(‘’) , 이벤트 발생 제어