잡다한 지식의 블로그

Vue.js에서 Component란? - 조합하여 화면을 구성할 수 있는 블록 - 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발가능. - 코트를 쉽게 이해할 수 있으며 재사용이 쉬워진다. Vue.js의 Component의 종류 1. 전역(Global) - 모든 범위의 여러 인스턴스에서 공통으로 사용이 가능. - Vue.component()를 사용하여 등록 2. 지역(Local) - 특정 인스턴스에서만 사용이 가능. - 인스턴스에 components속성을 추가하여 사용. Vue.js의 Component(Global)의 예 {{ name }} vue1 변경 {{ name }} vue2 변경 Vue.js의 Component(Local)의 예 {{ name }} vue2 변경

지금 까지는 한개의 Vue로 한개의 인스턴스를 사용하였지만, 여러개의 Vue로 두 개 이상의 인스턴스도 사용이 가능하다. Vue.js에서 멀티 인스턴스 사용 예 {{ name }} vue1 변경 {{ name }} vue2 변경 위의 예 처럼 div에 사용되는 id값을 통하여 Vue를 여러개 생성하고 d값을 지정하여 멀티 인스턴스를 사용할 수 가 있다. 더 나아가서 위의 예에서 app에 해당하는 vue에서 app-1에 해당하는 뷰의 데이터 또는 함수를 이용하고 싶을 경우에는 아래의 예와 같이 "const 이름"을 사용하면 된다. {{ name }} vue1 변경 {{ name }} vue2 변경

Vue.js에서 v-for란? - HTML 태그 속성 부분에서 사용하는 반복문. - v-for = "(item, index) in(of) list" :key="key"의 형식을 가진다. - v-for문을 사용하기 위해선 key값을 지정해줘야 하며 이 값은 유니크 값으로 해주는 것이 좋다. Vue.js에서 v-for 사용 예 {{ people[0].name}} {{people[0].age}} {{ people[1].name}} {{people[1].age}} {{ people[2].name}} {{people[2].age}} {{ people[3].name}} {{people[3].age}} {{ person.name}} {{person.age}}