반응형 DEVLOG/Vue.js17 Vue 인스턴스 - #7 인스턴스 라이프사이클 훅 Vue 인스턴스 - #6 속성과 메소드 뷰 인스턴스 옵션 속성 뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미합니다. new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) 위 예제에서는 data.. deepwelloper.tistory.com 지난 2019/05/08 - [Web/Vue.js] - Vue 인스턴스 - #6 속성과 메소드 에서 살펴본 인스턴스의 속성 중 created가 있었습니다. created 속성은 인스턴스가 생성되었을 때 호출할 동작을 정의하는 속성입니다. 이처럼 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클(life cycle) 속성이라고 합니다. 그리고 .. 2019. 5. 8. Vue 인스턴스 - #6 속성과 메소드 뷰 인스턴스 옵션 속성 뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미합니다. new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) 위 예제에서는 data라는 미리 정의되어 있는 속성을 사용했습니다. 그리고 그 안에 message라는 새로운 속성을 추가하고 Hello Vue.js!라는 값을 주었습니다. el 속성 역시 미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미합니다. 뷰 인스턴스 화면을 렌더링할 때 화면이 그려질 위치의 DOM 요소를 지정해 주어야 합니다. 여기서 #app 값은 화면의 DOM 요소 중 app이라는 id를 가진 요소를 의미합니다. 여기서 사용한 # 선택자는 C.. 2019. 5. 8. Vue 인스턴스 - #5 Vue 인스턴스 만들기 Vue 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위입니다. 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다. 뷰 인스턴스 생성자 var vm = new Vue({ // 옵션 }) new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 합니다. Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있습니다. 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서입니다. 엄격히 MVVM 패턴과 관련이 없지만 Vue의 디자인은 부분적으로 그것에 영감을 받았습니다. 컨벤션으로, Vue 인스턴스를 참조하기 위해 종종 변수 vm(ViewMo.. 2019. 5. 8. Vue.js 시작하기 - #4 컴포넌트를 사용한 작성방법 컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 그 자체로 제 기능을 하며 재사용할 수 있는 컴포넌트로 구성된 대규모 응용 프로그램을 구축할 수 있게 해주는 추상적 개념입니다. 생각해보면 거의 모든 유형의 응용 프로그램 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다. Vue에서, 컴포넌트는 본질적으로 미리 정의된 옵션을 가진 Vue 인스턴스 입니다. Vue에서 컴포넌트를 등록하는 방법은 간단합니다. // todo-item 이름을 가진 컴포넌트를 정의합니다 Vue.component('todo-item', { template: '할일 항목 하나입니다.' }) 이제 다른 컴포넌트의 템플릿에서 이 컴포넌트를 사용할 수 있습니다. 그러나 이는 모든 할 일 인스턴스에 똑같은 내용을 렌더링할 것.. 2019. 5. 8. 이전 1 2 3 4 5 다음 반응형
