할머니의 콤퓨타 도전기

코드 구현 (@/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 실행 화면

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]..

v-if 조건부 블럭 안의 이벤트 리스너와 자식 컴포넌트가 토글하는 동안 적절하게 제거되고 다시 만들어지기때문에 "진짜" 조건부 렌더링 됨 렌더링에서 조건이 거짓인 경우 조건 블록이 처음으로 참이 될 때 까지 렌더링 되지 않음 v-show CSS 기반 토글만으로 초기 조건에 관계 없이 엘리먼트가 항상 렌더링 됨 v-if는 토글 비용이 높고 v-show는 초기 렌더링 비용이 높다 따라서 매우 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장 kr.vuejs.org/v2/guide/conditional.html 조건부 렌더링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 코드 구현 (v-if) 여러개의 div 태그 한번에 조건..

Watch 데이터의 감시자가 필요한 경우에 사용 kr.vuejs.org/v2/guide/computed.html#watch-%EC%86%8D%EC%84%B1 computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 코드 구현 {{ message }} Click! {{ updated }} 실행 화면