본문 바로가기
반응형

DEVLOG87

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.
Vue.js 시작하기 - #3 사용자 입력 핸들링 사용자가 앱과 상호 작용할 수 있게 하기 위해 우리는 v-on 디렉티브를 사용하여 Vue 인스턴스에 메소드를 호출하는 이벤트 리스너를 첨부 할 수 있습니다 {{ message }} 메시지 뒤집기 var app5 = new Vue({ el: '#app-5', data: { message: '안녕하세요! Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) 이 메소드에서 우리는 단순히 DOM을 건드리지 않고 앱의 상태를 업데이트 합니다. 모든 DOM 조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춥니다. Vue는 또한 양식에 대한 입.. 2019. 5. 8.
반응형

티스토리툴바