꾸생의 DevLog

[Vue.js] 뷰 이벤트 버스 객체를 이용한 통신

뷰(Vue) 이벤트 버스 객체를 이용한 통신 뷰에서 부모 - 자식 관계의 컴포넌트는 정보 전달을 위해 props와 events를 사용한다! 하지만 부모-자식 관계가 아닐 경우에는 어떻게 정보 전달이 이루어질까? 두 컴포넌트의 관계가 형제 관계 또는 부모와 손자, 증손자 관계일 경우 정보전달을 이벤트 버스(Event Bus) 객체를 만들어 사용한다. (비어있는 Vue 인스턴스를 만들어 사용) 1. created 이벤트 훅을 이용해 Vue 인스턴스가 만들어질 때 $on 메서드를 사용해 이번트 수신 정보 등록 2. 이벤트를 발신하는 컴포넌트에서는 $emit 메서드를 호출 See the Pen [Vue.js] 뷰 이벤트 버스 객체를 이용한 통신 by junheeleeme (@junheeleeme) on Code..

2020.11.12  

[Vue.js] 뷰 컴포넌트 props와 event 예제

뷰 컴포넌트 props와 event 예제 Vue 컴포넌트가 부모 - 자식의 관계로 형성되어있을 때 각 컴포넌트 내부의 데이터는 캡슐화되기 때문에 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달하기 위해서는 속성(props)을 이용해야 한다. (부모에서 자식으로 단방향으로만 전달 가능, 반대로 자식에서 부모는 이벤트를 이용) SearchContactComponent (부모) ↓ SearchComponent (자식) ContactlistComponent(자식) 1. SearchComponent(자식)가 입력값을 받아서 SearchContactComponent(부모)한테 전달 2. Search-Contact-Component(부모)가 검색 기능을 수행 3. contactlist-component(자식)가 v-b..

2020.11.11  

[Vue.js] 뷰(Vue) 컴포넌트

뷰(Vue) 컴포넌트 뷰 컴포넌트란? 화면을 구성할 수 있는 블록(특정 영역)단위를 의미하며, 컴포넌트를 활용하여 화면을 빠르게 구조화하여 일괄적 패턴으로 개발할 수 있다. 화면의 영역을 컴포넌트로 쪼개어 관리하면 나중에 유지보수가 용이하며, 남이 작성한 코드를 보다 직관적으로 이해할 수 있다. 흔히 웹의 구성화면에서 네비게이션 바, 테이블, 리스트 등과 같은 요소들을 잘게 쪼개어 컴포넌트로 관리한다. 전역 컴포넌트(여러 인스턴스에서 공통으로 사용) //인스턴스 //템플릿 전역 컴포넌트 입니다. 우선 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그를 의미하며, 컴포넌트 내용에는 template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다. 지역 컴포넌트(..

2020.11.10  

[Vue.js] Vue로 구현한 TodoList.app 예제

See the Pen [Vue.js] TodoList.app by junheeleeme (@junheeleeme) on CodePen. Vue로 구현한 TodoList.app 예제 Vue.js를 공부하면서 개인적으로 메모앱을 만들려고 일단 포스팅을 했지만.. 아직 완성하지도 못한채 학원 수업진도를 나가면서 메모앱과 비슷한 TodoList예제를 만들어봤다. 교재에서 나온 TodoList예제는 새로고침하면 내용이 사라지는 문제가 있어 TodoList 배열을 로컬스토리지로 저장하는 함수까지 추가했습니다. addTodo(), removeTodo(), doneToggle() 메소드에 setitem을 다 넣어주면 TodoList 추가부터 완료, 삭제까지 로컬스토리지에 저장된다.

2020.11.06  

[Vue.js] 뷰(Vue) 이벤트 처리

뷰(Vue) 이벤트 처리 Vue.js는 이벤트처리를 v-on 디렉트브를 사용하여 처리하고 '@'로 생략하여 사용가능. 이벤트를 처리하는 메서드는 첫 번째 파라미터로 이벤트 객체를 전달받는다. ex) function(3) { ... } 이벤트 객체는 W3C 표준 모델을 그대로 따르며 추가적인 속성을 제공. 자바스크립트에서 사용하던 이벤트 객체를 거의 대부분 사용가능. 이벤트 객체 주요 속성 target : 이벤트가 발생한 HTML 요소를 리턴함. currentTarget : 이벤트리스너가 이벤트를 발생시키는 HTML 요소를 리턴함 path : 배열값, 이벤트 발생 HTML 요소로부터 documnet, window 객체로까지 거슬러 올라가는 경로를 나타냄 bubbles : 현재의 이벤트가 버블링을 일이키는 ..

2020.11.05  

[Vue.js] 뷰(Vue) 디렉티브와 계산형 속성 예제(feat. methods)

뷰(Vue) 디렉티브 + 계산형 속성 예제 See the Pen [Vue.js] 뷰(Vue) 디렉티브 + 계산형 속성 예제 by junheeleeme (@junheeleeme) on CodePen. //v-on: 을 @ 로 줄여서 사용가능 //@input="nameChanged" 도 가능 //keyup 발생 시 nameChanged 메소드 실행 var App = new Vue({ el: "#app", data : { countryname : "", countries : [ {no : 1, name : "제니", birth_date : "950116", real_name : "김제니"}, {no : 2, name : "지수", birth_date : "940103", real_name : "김지수"}, {..

2020.10.30  

[Vue.js] 뷰(Vue) 계산형 속성(Computed Property)

뷰(Vue) 계산형 속성(Computed Property) See the Pen 뷰(Vue) 계산형 속성 by junheeleeme (@junheeleeme) on CodePen. var app = new Vue({ el : "#simple", data : { num : 0, result : 0 }, computed : { sum : function(){ var nsum = 0; for(var i = Number(this.num) ; i > 0 ; i--){ nsum+= i; } return nsum; } } computed 라고 해서 무언가 특별할 줄 알았는데 methods와 거의 같다. 속성처럼 입력하자마자 계산되어 출력이 되어버린다. return값을 무조건 필요로하며 메소드가 아니므로 methods..

2020.10.29  

[Vue.js] 뷰(Vue) 디렉티브 v-on 이벤트 핸들링

뷰(Vue) 디렉티브 v-on 알아보기 v-on "사용자의 액션에 의해 명령을 실행하는 입력핸들링 디렉티브 입니다." 오늘은 복습할겸 v-if와 v-on을 함께 사용하겠습니다. 우선 버튼을 눌렀을때 data의 visible이 'true'와'false'를 반복하며, 'true'일 경우 앨리먼트 안의 텍스트가 보여지고 'false'일 경우 사라지는 코드를 작성하겠습니다. v-on {{msg}} //v-if="visible" visible = {{visible}} //v-on:click="clickBtn" var firstApp = new Vue({ //JavaScript el: '#app', data :{ msg: '오늘은 v-on을 배우고 있습니다.', visible : true //초기값은 true },..

2020.10.25