Vue For Beginner
-
7. 많이 사용 되지 않지만 알고 있으면 도움이 되는 기능들Vue For Beginner 2019. 10. 3. 20:37
vue를 사용할 때 초급수준에서는 잘 사용되지는 않지만 추가로 알고 있으면 도움이 되는 개념들을 간단히 정리하였습니다. 1. slot 일반적으로 지식컴퍼넌트는 부모컴퍼넌트로부터 데이터를 받아 화면이 구성됩니다. 이때 porps를 활용하여 데이터가 전달됩니다. 여기에 slot을 활용하면 부보모부터 완성된 HTML을 받을 수 있습니다. 다시말하면 HTML 템플릿이 오는 비어있는 공간으로 또한 그 공간의 이름을 정의 할 수 있습니다. https://kr.vuejs.org/v2/guide/components-slots.html 슬롯(Slots) — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 2. filter 템플릿에 바인딩 된 텍스트의 형식을 '|' 기호를 활용해서 ..
-
6. 폼(form) 다루기 (v-model)Vue For Beginner 2019. 10. 3. 20:07
v-model은 템플릿과 데이터를 양방향으로 바인딩하는 기능입니다. 사용자의 입력에 따라 데이터가 바뀌고 데이터가 수정되면 템플릿의 내용이 업데이트 되는 것 입니다. 그래서 v-model을 활용하면 사용자의 입력을 받는 UI를 쉽게 해결할 수 있습니다. {{name}} 기본적인 사용법은 위의 코드와 같습니다. input의 입력된 값이 name데이터를 변화시키고 입력된 값은 화면에서 바로 볼 수 있습니다. 체크박스, 라디오 박스등에도 활용할 수 있습니다. 단일체크박스와 라디오박스 경우 true/false가 데이터에 바인딩되고, 여러개의 체크박스라면 선택된 체크박스의 value가 데이터에 리스트로 바인딩 됩니다.
-
5. 컴퍼넌트와 데이터 전달 (component, props, $emit)Vue For Beginner 2019. 10. 1. 22:19
vue의 컴퍼넌트는 view를 이루는 작은 단위로 라이프사이클과 상태를 가지고 있습니다. 이러한 컴퍼넌트를 조합하여 하나의 화면이 완성이 되는 것 입니다. 그리고 컴퍼넌트를 어떻게 나누는가는 프로젝트와 개발자의 성향에 따라 달라지게 되는데 여기서는 아주 일반적인 케이스로 본인의 스타일에 따라 응용이 가능하도록 설명하겠습니다. 1. 컴퍼넌트의 생성 컴퍼넌트는 아래와 같은 형태로 생성할 수 있습니다. Vue.component('my-component', { template: '버튼!', data: function () { return data } }) 하나의 버튼을 하나의 컴퍼넌트로 생성하였고 이 컴퍼넌트는 ``와 같은 형태로 다양한 영역에서 사용할 수 있습니다. vue-cli를 활용하면 .vue파일이 컴퍼..
-
4. 컴퍼넌트의 이해와 vue-cli으로 프로젝트 생성Vue For Beginner 2019. 9. 29. 22:05
컴퍼넌트 앞에서 HTML페이지에서 직접 vue를 가져와 간단한 기능을 빠르게 익혔습니다. vue는 기본속성과 조건부랜더링을 위해서도 사용되지만 컴퍼넌트단위로 개발하면 더 나은 웹앱을 효율적으로 만들 수 있습니다. 컴퍼넌트란 화면을 구성하는 단위로 vue가 제공하는 강력한 기능입니다. 라이프사이클 훅의 사용이 가능하며 재사용 가능한 코드를 생성하여 효율적으로 개발할 수 있습니다. 즉 여러개의 컴퍼넌트를 조립하여 하나의 페이지를 완성해가는 형태의 개발이 가능해집니다. vue는 하나의 파일이 하나의 컴퍼넌트로 구성되는 SFC로 vue확장자를 가진 파일하나가 하나의 컴퍼넌트를 구성하고 각각의 컴퍼넌트는 상태와 라이프사이클을 가지게 되며 각각의 컴퍼넌트는 데이터를 다른컴퍼넌트로 데이터 또는 이벤트를 전달할 수 있..
-
3. 이벤트 핸들링Vue For Beginner 2019. 9. 29. 21:24
이벤트핸들링 이벤트의 이해 이벤트는 UI개발에 있어 중요한 부분을 차지합니다. 대부분의 경우 어플리케이션은 유저의 클릭을하거나 스크롤을 하는 등 이벤트에 반응하면서 시작합니다. 이전방식은 DOM요소에 이벤트리스너를 등록하난 방식이 주로 사용되었습니다. html에 인라인으로 넣을 수 있지만 MVC패턴에서 뷰와 컨트롤러를 분리하고자 했기 때문에 거의 사용되지 않고 좋은 방법이 아니기 때문에 아래 코드에서 첫번째 방법만 사용이 되고 있습니다. document.querySelector('.myButton').addEventListener('click', function () { alert('Clicked!'); }); Click me document.querySelec..
-
2. 리스트랜더링과 조건부랜더링Vue For Beginner 2019. 9. 29. 21:23
빌트인 디랙티브 (리스트, 조건부 랜더링) vue에서 간단한 리스트를 출력하는 방법이 정의되어있습니다. (v-for) 라디오박스 클릭 시 각각 다른 리스트 목록이 보여지는 기능으로 조건부 랜더링을 설명하고있습니다. (v-show, v-if) 리스트 랜더랑 vue는 데이터가 배열일 경우 리스트형태로 랜더링 할 수 있는 기능을 제공합니다. 이때 사용되는 문법이 v-for 라는 빌트인 디렉티브 입니다. 사용법은 다음과 같습니다. {{index}} {{ item }} 위에서 item에는 배열의 각각의 항목이 오고 index에는 배열의 인덱스가 옵니다. :key는 필수로 입력되는 항목은 아니지만 각 항목의 key값을 입력하도록 권장합니다. 아래는 채소와 과일의 리스트를 각각 출력하는 코드입니다. 과일 리스트 {{..
-
1. Vue의 기본속성 이해 (data, computed, watch)Vue For Beginner 2019. 9. 29. 21:20
기본속성의 이해 웹개발을 처음 시작하는 사람들을 위해 작성되었습니다. data, computed watch 속성을 쉽고 빠르게 이해할 수 있습니다. data 바인딩 (템플릿) vue는 HTML과 유사한 템플릿에 선언된 데이터를 보여주는 방식으로 개발이 이루어집니다. 즉 데이터의 변화에 따라 화면에 보여지는 내용이 갱신되는 반응형 시스템이고 이러한 구조를 MVVM이라고 볼 수 있습니다. vue는 내부적으로 템플릿을 가상 DOM으로 컴파일 하여 최소한의 DOM조적으로 이러한 과정이 진행될 수 있도록 설계되어있습니다. 작동원리를 이해하는 것은 매우 복잡하지만 사용하는 방법은 매우 단순하고 쉽습니다. 템플릿에서 {{ }} 이중중괄호로 선언된 데이터를 바인딩 하는 형태입니다. 이를 Interpolations이라..