Vue.js 개념1

Vue.js

• 현재 프론트엔드에서 가장 인기있는 프론트 엔드
• 다운로드 방법 : 다운로드 , CDN, NPM, CLI

장점

• 가장 적은 러닝커브 (문법 이해가 쉽다.) -> 자바스크립트를 잘 알아야 한다.
• 매우 적은 크기
• 공식 사이트의 상세한 설명
• 가장 최근에 릴리즈 시작한 프레임워크 (2014년)
• React와 Angular의 장점 적용
• 사용자의 인터페이스에 집중한 언어

MVVM 패턴

• Model, Vue, View Model (MVVM)

• 양방향 통신이 가능한 언어

Virutal DOM

• 가상의 돔에 작은 처리를 넣어서 모아놓다가 한꺼번에 모아서 DOM에 넣어 처리해주는 것
• lots of small changes -> make one big change (Buffer와 비슷함)
• 부하를 줄여주는 것.

live server

• 로컬 서버, 변경 사항 자동 반영

Vue.js 인스턴스

• Vue앱은 Vue 함수로 인스턴스를 만드는 것부터 시작

const vm = new Vue({
	// 옵션
});

el 옵션

• “css 선택자” or HTML Element, Vue가 적용될 요소 지정

Mustache -

• 데이터가 들어가 있는 변수 이름을 넣으면 바인딩이 일어나서 자동으로 반영이 된다.
• 머스테치 안에는 가능한 단순한 구조를 유지하는 것이 좋다.

Directives (지시자)

v-text	변수값에 들어가 있는 문자열이 text로 처리된다.(tag 포함)
v-html	.html() 과 같은 기능 태그를 읽어서 DOM에 추가한다.
v-once	한번만 실행하게 하는 것 (데이터 바인딩이 한번만 이루어짐)
v-model	양방향 통신을 가능하게 하는 것 사용자 입력을 받아야할 경우 사용됨
v-bind	엘리먼트 속성 바인딩 처리를 위해서 사용 v-bind는 약어로 “:”로 사용 가능
v-show	화면에 보여야할 경우 CSS 속성의 Display를 조작하는 것 (element를 제거하는 것이 아니라 일시적으로 보이지 않게 하는 것)
v-if	false일 때 element를 아예 제거함
v-else-if	일반 else if 구문과 같음
v-else	일반 else 구문과 같음
v-for	Pythond의 for 구문과 비슷함
v-cloak	Vue 인스턴스가 준비될 때까지 mustache 바인딩을 숨기는데 사용 Vue 인스턴스가 준비되면 v-cloak은 제거됨.
v-on	DOM 이벤트를 청취하기 위해서 사용됨

Template

• 여러 개의 태그들을 묶어서 처리해야 한다면 template를 이용하면 편리하다.
• 주로 v-if, v-for, component등과 함께 많이 사용한다.

ES6

let

• 호이스팅이 불가하다.
• 중복선언 불가능

const

• 상수로 사용
• 선언 시 값을 할당해야 함.
• 호이스팅 불가능