반응형

vue.js 2

[ Vue.js ] Vue 기본 문법 (CDN방식, v-html ,v-model, v-if v-else-if, v-on, v-bind,v-show)

1. Vue 인스턴스 만들기 new Vue 블럭안에 el, data, method 등 옵션을 설정할 수 있다. new Vue({ el: "#app", data: { text: 'hellp world' }, }) 2. new Vue()에 사용가능한 옵션(속성) 옵션 설명 el 인스턴스가 그려지는 화면의 시작점 template 화면에 표시할 요소 data 뷰의 반응성 Reactivity 반영 속성 method 화면의 동작과 이벤트 로직 제어 메소드 watch data에 정의한 속성이 변화했을때 추가동작 수행하게 해주는 속성 computed 데이터의 문자열 순서를 역으로 변화해주는 속성 기타 LifeCycle Hook(created, mounted..) 뷰 라이프 사이클과 관련된 속성 3. 데이터 출력 방법 ..

[ Vue.js ] Vue 라이프 사이클(lifecycle)

Vue 라이프 사이클(lifecycle) - 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계 - 각 단계에서 실행되는 함수들을 라이프사이클 훅이라고 한다. - 크게 생성(create), DOM에 부착(mount), 업데이트(update), 소멸(distory) 4가지 과정을 거친다. beforeCreate Vue 인스턴스가 초기화 된 직후에 발생 컴포넌트가 DOM에 추가되기 전이여서 this.$el 사용할 수 없음 데이터와 이벤트가 설정되기 전이여서 data, methods에 접근할 수 없음 created 인스턴스가 부착되기 전이기 때문에 template 속성에 정의된 돔 요소에 접근 불가 data, methods 등이 활성화되어 접근 가능 컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅하거나,..

반응형