1. 뷰의 단위를 쪼개서 재활용이 쉽다. (컴포넌트로 구성하여 사용) 2. 가볍고 빠르다. 3. 데이터 피드백이 빠르다.
- 출력값과 모델값의 동기화 - 필요한 부분만 빠르게 렌더링
= Vue.js는 View가 아니라 데이터를 조작한다는 개념으로 이해하면 쉽다.
< Vue js 로드 >
<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
< Vue Instance Example>
var vm = new Vue({
el: '#id값'
data() {
수정중
},
methods: {
printName: function() {
console.log(this.data);
}
})
< LifeCycle Hook >
라이프 사이클 : 인스턴스가 호출되고 사라지는 전체 과정
훅 : 각 라이프 사이클에서 실행되는 커스텀 로직
1. beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 단계 data속성/methods속성이 아직 인스턴스에 정의되지 않았으므로 DOM(화면요소)에 접근할 수 없다.
2. created : data/methods 정의 > 로직 실행가능, 컴포넌트 생성 서버에 데이터를 요청해 받아오는 로직을 수행하기 적합한 단계
3. beforeMount : 마크업 속성을 DOM에 부착하기 전 단계 render() 함수 호출 전이다.
4. mounted : DOM에 인스턴스가 부착 되자마자 호출되는 단계 DOM에 접근가능, 화면요소를 제어하는 로직을 수행하기 좋은 단계
5. beforeUpdate : 데이터가 변경되고 가상 돔으로 화면을 다시 그리기 전 단계 변경 예정인 데이터값에 접근가능하므로 그 값과 관련된 로직을 넣기 좋다. * 값을 변경하는 로직을 넣더라도 화면이 다시 그려지진 않음
6. updated : 데이터가 변경된 후, 가상돔으로 화면을 다시 그린 후 실행되는 단계 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋다. * 이 단계에서 값을 바꾸면 무한루프에 빠질 수 있으니, computed나 watch를 사용해야한다. 가급적 값을 바꾸는 로직은 beforeUpdate에 넣고, updated는 변경 데이터의 화면요소(DOM)과 관련된 로직을 추가하는 것이 좋다.
7. before Destroy : 뷰 인스턴스가 파괴되기 직전 단계. 아직 인스턴스에 접근할 수 있으므로 인스턴스의 데이터를 삭제하기 좋다.
8. destroyed : 인스턴스가 파괴되고 난 후 호출되는 단계.
< Vue Directive >
: html태그 안에서 v-접두사를 가지는 속성들
v-bind : 데이터가 바뀌면 DOM에 반영이 된다. 단방향 (출력만 할때) v-model : View에서 데이터가 바뀌면 둘다 바뀐다. 양방향 (v-bind + v-on:input) v-on : View에서 일어난 이벤트를 처리하는 키
v-for : v-if 보다 우선 순위가 높다. for문
v-if : v-for보다 우선 순위가 낮다. if문
v-pre : 특정 Elements들을 무시, 컴파일 속도에 영향
* DOM에서는 케밥케이스나, 소문자로 입력해야 인식된다.
< computed, methods, watch >
computed : 선언형, 캐싱한다. 원본 객체의 값이 변하지 않으면 다시 연산하지 않는다.