할머니의 콤퓨타 도전기

구조 분해 할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 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 실행 화면

(모르는 거 생길 때 마다 추가~ 아는게 엄서요) 태그 입력 양식 전체를 감싸는 태그 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시 태그 폼의 양식에 이름을 붙이는 태그 주요 속성 for label의 for의 값과 양식의 id의 값이 같으면 연결됨 label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 해제함

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! 실행 화면