분류 전체보기 검색 결과

해당 글 188건

컴포넌트 심화 학습 (Slot)

Slot - 컴포넌트 내에서 다른 컴포넌트를 사용할 때 쓰는 컴포넌트의 마크업을 재정의하거나 확장하는 기능 - 컴포넌트의 재활용성을 높여주는 기능 Slot을 사용하여 Modal Popup 만들기 - 팝업의 기본 틀에 해당하는 modal-layout 컴포넌트 // src/views/SlotModalLayout - 이렇게 Slot에 name을 지정해서 사용하는 Slot을 'Named Slots'라고 한다. - 컴포넌트는 정해진 html 구조를 갖게 된다. 이렇게 작성된 컴포넌트를 제공하고 개발자는 각 slot에 해당하는 코드만 작성하면 되기 때문에, 어떤 개발자가 구현하더라도 동일한 디자인의 팝업을 만들 수 있게 된다. - Slot을 사용하는 컴포넌트에서는 삽입한 컴포넌트 안에서 다음과 같이 template..
JavaScript/Vue.js 2021. 7. 16. 14:00

컴포넌트 심화 학습(Props, $refs, $emit)

부모 컴포넌트와 자식 컴포넌트 // scr/components/PageTitle.vue Page Title // src/views/NestedComponent.vue - 컴포넌트에서 다른 컴포넌트를 사용하는 방법은 사용할 컴포넌트를 import한 후 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 components에 등록하면 된다. : PageTitle 컴포넌트를 import 한다. import PageTitle from './components/PageTitle' : 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 등록한다. components: { PageTitle } : HTML에서는 import한 컴포넌트를 이용해서 이름을 이용해서 태그를 만들면 된다. 컴포넌트는 페이지 하나 전체가 될 수도 있고, 하..
JavaScript/Vue.js 2021. 7. 16. 13:27

Computed와 Watch

Computed와 Watch는 둘 다 Vue 인스턴스 내의 정의된 데이터 값에 변경이 일어나고 있는지를 감시하고, 변경될 때마다 정의된 함수가 실행됨. 데이터의 값이 변경되었는 지를 계속 감시한다는 측면에서 Computed와 Watch는 매우 비슷해 보이지만, 사용되는 용도에는 분명 차이가 있다. Computed - Computed는 Vue 인스턴스 내에 정의된 데이터 값과 연관된 또 하나의 데이터를 정의해서 사용할 수 있도록 해줌 Full Name: {{ fullName }} - computed 내에 fullName이 정의되어 있고, firstName과 lastName을 합쳐서 반환해주는 함수로 정의되어 있다. - 여기서 함수명인 fullName은 함수이자 동시에 Vue 인스턴스의 데이터 키 값이다. ..
JavaScript/Vue.js 2021. 7. 15. 16:42

이벤트 처리 (v-on)

Vue 컴포넌트에서 이벤트를 처리할 때는 v-on 디렉티브를 사용함 v-on 디렉티브는 심볼 @로 사용 가능하다. 클릭 이벤트 (v-on:click) - 클릭 이벤트는 v-on:click="메소드명" 혹은 @click="메소드명"을 사용해서 추가할 수 있음 Add One {{ counter }} - 클릭 이벤트 발생 시 여러 개의 함수를 호출하고 싶다면 다음과 같이 작성하면 됨 Click Change 이벤트 (v-on:change) - change 이벤트가 가장 많이 사용되는 html 태그는 select 이다. 사용자가 select에서 옵션을 바꿀 때마다 change 이벤트가 발생함 - change 이벤트는 v-on:change="메소드명" 또는 @change="메소드명"으로 사용함 서울 경기 제주 Ke..
JavaScript/Vue.js 2021. 7. 15. 16:17

랜더링(v-for, v-if, v-show)

리스트 랜더링(v-for) select의 option, table의 tr 데이터 등 반복되는 객체를 처리할 떄 많이 사용함 쇼핑몰에서 보게되는 제품 리스트처럼 동일한 UI 패턴에 데이터만 다르게 처리되는 그런 부분들이 다중 데이터를 이용해서 처리되는 부분이라고 생각하면 됨 배열 데이터는 v-for 디렉티브를 이용해서 바인딩할 수 있음 반복적으로 랜더링할 html 태그에 v-for 디렉티브를 사용하면 배열에 있는 데이터 수만큼 html태그를 반복적으로 랜더링하게 됨 v-for="(item, index) in items" 위와 같은 형식으로 사용함 여기서 items는 데이터 배열임 v-for를 통해 배열을 하나씩 읽어와서 배열의 각 아이템을 item으로, 배열의 현제 index를 index로 반환해줌 ind..
JavaScript/Vue.js 2021. 7. 15. 15:56

데이터 바인딩(Data Binding)

Vue는 Angular와 마찬가지로 양방향 데이터 바인딩(Two-way data binding)을 지원함 참고로 React는 단방향 데이터 바인딩만을 지원함 여기서 양방향 데이터 바인딩이라는 것은 Model에서 정의한 데이터를 정의한 후 View와 연결하면 Model과 View 중 어느 한쪽에 변경이 일어났을 때 다른 한 쪽으로 자동으로 반영되는 것을 의미함 서버로부터 받아온 데이터를 바인딩 하는 경우 - 데이터가 html tag 안에 텍스트로 바인딩 되는 경우 - 데이터가 html tag의 속성(Attribute)로 바인딩 되는 경우 - 데이터가 html의 Form element의 value에 바인딩 되는 경우 - 다중 데이터가 html의 다중 element를 생성하기 위해서 바인딩 되는 경우 문자열 ..
JavaScript/Vue.js 2021. 7. 15. 15:30

Component(컴포넌트)란

컴포넌트 - View, Data, Code의 세트 - 컴포넌트 안에는 HTML 코드가 있고, 이 HTML 코드를 실행하기 위한 자바스크립트 코드 그리고 데이터가 존재함 - 컴포넌트의 가장 큰 특징은 재사용이 가능하드는 점이다. 즉, 다른 컴포넌트에 import해서 사용할 수 있다. - Vue에서 컴포넌트는 우리가 보는 페이지 자체일 수도 있고, 페이지 내의 특정 기능 요소일 수 있다. 컴포넌트 기본 구조 - : view에 해당하는 html 코드를 작성하는 영역 - name : 컴포넌트 이름을 등록. 이름을 등록하지 않아도 사용하는 것에는 지장이 없다. - components : 외부 컴포넌트를 사용하게 되면 해당 컴포넌트를 import한 후, 이곳에 배열로 등록해줘야 함 - data : html코드와 J..
JavaScript/Vue.js 2021. 7. 15. 14:31

Vue.js 공부 시작

Vue.js란 - 사용자 인터페이스 개발을 위한 Progressive Framework (프로그레시브라는 것은 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해 개발한 것을 뜻함) Vue.js의 장점 - 직관적이고 배우기 쉽다. - 재사용을 통한 애플리케이션의 개발 기간 단축 및 양질의 코드를 생산할 수 있다. - Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있다. Vue.js의 특징 - MVVM(Model-View-ViewModel) 패턴 사용 : 프로그래밍 로직과 화면에 해당하는 View(UI)를 분리해서 개발하기 위해 설계된 패턴입니다. : View와 Model 중간에 ViewModel을 둠으로써 데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개..
JavaScript/Vue.js 2021. 7. 15. 14:07