본문 바로가기
반응형

Vue.js 기초2

Vue.js 시작하기 - #4 컴포넌트를 사용한 작성방법 컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 그 자체로 제 기능을 하며 재사용할 수 있는 컴포넌트로 구성된 대규모 응용 프로그램을 구축할 수 있게 해주는 추상적 개념입니다. 생각해보면 거의 모든 유형의 응용 프로그램 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다. Vue에서, 컴포넌트는 본질적으로 미리 정의된 옵션을 가진 Vue 인스턴스 입니다. Vue에서 컴포넌트를 등록하는 방법은 간단합니다. // todo-item 이름을 가진 컴포넌트를 정의합니다 Vue.component('todo-item', { template: '할일 항목 하나입니다.' }) 이제 다른 컴포넌트의 템플릿에서 이 컴포넌트를 사용할 수 있습니다. 그러나 이는 모든 할 일 인스턴스에 똑같은 내용을 렌더링할 것.. 2019. 5. 8.
Vue.js 시작하기 - #2 조건문과 반복문 엘리먼트의 존재 여부를 토글하는 것은 아주 간단합니다. 이제 나를 볼 수 있어요 var app3 = new Vue({ el: '#app-3', data: { seen: true } }) 콘솔에서 app3.seen = false 를 입력해보세요. 메시지가 사라지는 것을 확인할 수 있습니다. 이 예제는 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 보여줍니다. 또한 Vue 엘리먼트가 Vue에 삽입/갱신/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 강력한 시스템을 제공합니다. 몇가지 디렉티브가 있습니다. 각 디렉티브마다 고유한 기능이 있습니다. 예를 들어 v-for 디렉티브는 배열의 데이터를 사용해 항목 목록을 표시하는데 사용할 수 있습니다. {{ todo.text }} var.. 2019. 5. 8.
반응형