할머니의 콤퓨타 도전기

라이프 사이클 단계를 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스 내용이 갱신, 인스턴스가 제거되는 소멸로 구성 (부착 --> 갱신은 데이터가 변경되는 경우에만 거침) 인스턴스 생성! new Vue() 이벤트 및 라이프 사이클 초기화 beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 data 속성과 methods 속성이 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에 접근 불가 화면에 반응성 주입 created data, methods 속성에 정의된 값에 접근하여 로직 수행 가능 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없음 data 속성과 methods 속성..

구조 분해 할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 구조 분해 연산자, 전개 연산자, 각 배열에 들어가 있는 데이터를 하나씩 가져와서 처리해야 되는 상황을 한 번에 처리할 수 있도록 해줌 화살표함수 무명 함수를 생성하는 방법 중 하나 기본 형태 : (parameter1, parameter2, ... ) => {함수 내용} findIndex() 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스 반환 만족하는 요소가 없으면 -1 반환 arr.findIndex(callback) callback(element, index, array) : 콜백함수가 받는 인자는 findindex 메서드를 호출한 배열에서 받아옴 코드 구현 (App.v..

생명주기(Life Cycle) 인스턴스의 상태에 따라서 호출할 수 있는 속성들 속성마다 개발자가 추가한 커스텀 로직을 Life Cycle Hook 이라고 함 뷰 인스턴스는 객체이기 때문에 생명주기를 가짐 라이프 사이클 다이어그램 kr.vuejs.org/v2/guide/instance.html#라이프사이클-다이어그램 Vue 인스턴스 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 뷰 인스턴스의 data와 methods 속성이 정의되어 있지 않고 화면 요소(ex. dom)에 접근 불가 created data와 methods 속성 정의되어있음 따라서 두 속성값에 접근 가능 아직 화면..

Slot 컴포넌트를 사용하는데 따로 html 코드를 추가해주고 싶을 때 사용 slot에 name을 주면 여러 곳에서 html 코드 추가 가능 코드 구현 (Jione.Vue) header1 body1 footer About.vue This is an about page header2 ({{ jione }}) body2 실행 화면

코드 구현 (ver.1) props로 data를 넘겨주고 값이 변하면 emit로 부모 컴포넌트에 값을 보내줌 부모 컴포넌트로 보내온 값을 받아서 update 시켜줌 Home.vue This is Home Page! {{ name }} InputField.vue Name 코드 구현 (ver.2) (대부분 이렇게 씀) component에도 v-model 사용 가능 child component에게 value 보냄 Home.vue This is Home Page! Submit {{ name }} InputField.vue Name 실행 화면

Props props 여러개 받을 수 있음 props를 다른 곳에서 쓰면 안됨 (ex. props로 name을 쓰고싶다면 data에서 name을 사용하면 안된다) 받은 props는 받은(자식) component에서 직접적으로 변경해주면 안됨 props는 부모 component에서 보내주는 데이터. 따라서 양쪽에서 바꾸면 헷갈림 props를 변경하고 싶을 때에는 부모로 event를 보내서 바꿔달라고 요청 후 evnet를 받은 부모가 바꿔주는 형식으로 해야함 코드 구현 (Jione.vue) {{ title }} {{ name }} Home.vue This is Home Page! 실행 화면