할머니의 콤퓨타 도전기

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

코드 구현 (@/views/Home.vue) This is Home Page! @/components/Jione.vue {{name}} Change name 실행 화면

컴포넌트 (Component) 기본 html 요소를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움 됨. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트 Vue 컴포넌트는 Vue 인스턴스. 따라서 모든 옵션 객체 사용 가능 지역 등록 모든 컴포넌트를 전역 등록을 하면 설사 어떤 컴포넌트를 더 이상 사용하지 않더라도 최종 빌드에는 들어가 있음 즉 사용자가 내려받아야하는 자바스크립트의 양이 불필요하게 커짐 지역 등록이 가능한 것은 웬만하면 지역 등록하는게 좋음 kr.vuejs.org/v2/guide/components.html#컴포넌트가-무엇인가요 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 코드 구현 (전역 등록..

뷰 인스턴스 생성해서 변수에 담아주면 된다. 코드 구현 {{name}} update {{name}} update 실행 화면

pip 업데이트 pip3 install --upgrade pip pip3로 jupyter 설치 pip3 install jupyter jupyter notebook 실행 jupyter notebook

v-for kr.vuejs.org/v2/guide/list.html 리스트 렌더링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 코드 구현 v-for의 두번째 인자는 index이다. Vue에서 개별 DOM 노드들을 추적하고 기존 엘리먼트를 재사용, 재정렬하기 위해서 v-for의 각 항목들에 고유한 key 속성을 제공해야 함. 그러나 key 속성을 index로 주는 것은 올바르지 않다. key는 고유한 값을 가져야하는데 index로 key를 지정할 경우 리스트 원소의 삭제나 추가 있을 경우에 값이 바뀌게 된다. {{people[0].name}} {{people[0].age}} {{people[1].name}} {{people[1].age}} {{people[2]..