Dev 달팽이 @_''

Vue.js -4 vue-router - 라우팅 : 웹 페이지 간의 이동 방법 - Vue.js의 공식 라우터 - 라우터는 컴포넌트와 매핑 - Vue를 이용한 SPA를 제작할 때 유용 - URL에 따라 컴포넌트를 연결하고 설정된 컴포넌트를 보여줌 vue-router 이동 및 렌더링 - 네비게이션을 위해 router-link 컴포넌트를 사용 - 속성은 'to' prop을 사용 - 기본적으로 는 티그로 렌더링 $router, $route - 라우터 설정 - 라우터 링크 - 전체 라우터 정보 - 현재 호출된 해당 라우터 정보

Vue.js -3 Component - Vue의 가장 강력한 기능 중 하나 - HTML Element를 확장하여 재사용 가능한 코드를 캡슐화 - Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용 - Life Cycle Hook 사용 가능 - 전역 컴포넌트와 지역 컴포넌트 전역 컴포넌트 - 전역 컴포넌트를 등록하려면, Vue.component(tagName, options)를 사용 - 권장하는 컴포넌트 이름 : 케밥 표기법 지역 컴포넌트 - 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위만 사용할 수있는 컴포넌트를 만들기 가능 Component Template 컴포넌트간 통신 - 상위(부모) - 하위(자식) 컴포넌트 간의 ..

Vue.js Vue computed 속성 - 특정 데이터의 변경사항을 실시간으로 처리 - 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환 - Setter와 Getter를 직접 지정할 수 있음 - 작성은 method 형태로 작성하지만 Vue에서 proxy 처리하여 property처럼 사용 Computed와 Method의 차이 Computed : Vue 인스턴스가 생성될 때, data의 message값을 받아 reversedMsg를 계싼하여 저장해 놓음(캐싱) 위 코드에서 reversedMsg를 한 번 실행하는 것과 같음 Method : reversedMsg()를 사용하려고 할 때 마다 계산 위 코드에서 reversedMsg()를 세 번 실행하는 것과 같음 Vue watch 속성 - Vue ..

Vue.js Vue.js Vue.js 특징 - Approachable(접근성) - Versatile(유연성) - Performant(고성능) MVVM Parttern - Model + View + ViewModel - Model : 순수 자바스크립트 객체 - View : 웹페이지의 DOM - ViewModel : Vue의 역할 - 기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 library 이용 - Vue는 view와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함. Vue Instance el : Vue가 적용될 요소 지정. CSS Selector or HTML Element data : Vue에서 사용되는 정보 저장. 객체 또는 ..