본문 바로가기

component

Vue.js 완벽가이드 : (6) 스타일링 & 고급 컴포넌트 6. 리팩토링 : 스타일링, 공통 컴포넌트 리스트 아이템 컨포넌트 공통화를 위한 리팩토링을 진행합니다. 6-1. 컴포넌트 공통화 리팩토링 소개 AskView 컴포넌트 하나에 모든 데이터를 출력하였지만, 각 항목을 Component로 구성하여 리스트화를 작업하려 합니다. 이를 위한 공통 Component를 생성합니다. 6-2. News 리스트 스타일링 NewsView.vue 스탕일링을 합니다. 각 항목을 리스트로 표기합니다. 그리고 스타일링이 필요한 Tag에 클래스명을 지정하여 개별적인 스타일링을 수행합니다. {{ item.points }} {{ item.title }} by {{ item.user }} App.vue에 공통적인 스타일링을 추가합니다. 6-3. Ask, Jobs 리스트 스타일링 Ask와 J.. 더보기
Vue.js 시작하기 : (2) Instance & Comoponent 인스턴스 & 컴포넌트 3. 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야하는 코드입니다. 3-1. 인스턴스 소개 아래 코드에서 Vue로 인스턴스를 생성하는 것을 보여줍니다. 3-2. 인스턴스와 생성자 함수 인스턴스와 생성자 함수를 사용하는 예는 다음과 같습니다. function Vue() { this.logText = function() { console.log('hello'); } } var vm = Vue(); vm.logText(); 출력 -> hello 3-3. 인스턴스 옵션 속성 new Vue({ el: , template: , data: , methods: , created: , watch: }) el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그) templa.. 더보기