vue study

오늘은 Vue.JS step 8. event-emit 데이터 전달(자식 -> 부모)에 대해 포스팅하려고 합니다. 하위(자식) 컴포넌트에서 상위(부모) 컴포넌트로 데이터를 상속하기 위해서는 하위(자식) 컴포넌트에서 이벤트를 발생시켜 전달합니다. 디렉티브(directive)의 이벤트 문법인 v-on이 사용되어야 하며 v-on:[하위(자식) 컴포넌트 이벤트 이름]="[상위(부모) 이벤트 핸들링 메소드 이름]" 형태로 선언되어야 합니다. 그리고 하위(자식) 컴포넌트 이벤트 이름은 this.$emit('이벤트 이름', 전달 파라미터) 형태로 $emit() 안에 이벤트 이름과 전달하고자 하는 파라미터를 정의해야 합니다. 파라미터 전달 없이 이벤트만 실행하는 것이 목적이라면 this.$emit('이벤트 이름') 형태..

오늘은 Vue.JS step 6. watch vs computed 에 대해 포스팅 하려고 합니다. Vue.JS에서 watch와 computed는 비슷하지만 각각의 역할에 의해 구분이 되기 때문에 함께 비교하며 보도록 하겠습니다. 먼저 watch는 단어의 연관된 의미로 "감시자" 라고 볼 수 있습니다. 특정 대상을 지켜보며 변화를 감시하고 변화에 따라 watch에서 정의한 함수들이 동작하게 됩니다. 정의된 함수를 실행하기 위한 트리거 라고도 볼 수 있습니다. 또한 watch는 기본적으로 변경된 값의 newValue 인자와 변경되기 전의 값인 oldValue 인자를 변수값으로 가지고 있습니다. 그리고 computed는 단어의 연관된 의미로 "계산기" 라고 볼 수 있습니다. 기존의 정의된 값을 연산하여 결과 ..

오늘은 Vue.JS step 5. 메서드(methods)에 대해 포스팅 하려고 합니다. Vue.JS 인스턴스의 속성중에 methods를 통해 javascript의 function() 메서드를 생성할 수 있습니다. 또한 Vue.JS는 methods 안에 컴포넌트 인스턴스를 항상 참조할 수 있도록 this값을 자동으로 binding합니다. 아래 예제 소스코드를 통해 알아보도록 하겠습니다. methods.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다. vue 인스턴스 안에 methods에 함수를 정의합니다. 저는 간단하게 plus, minus의 function()을 정의하였습니다. 인스턴스안에 바인딩된 num 값을 this로 사용하여 값을 늘리고 줄이는 형태의 메서드입니다. {{message..

오늘은 Vue.JS step3. 컴포넌트(component)에 대해 포스팅하려고 합니다. Vue.JS에서 컴포넌트는 조합하여 화면을 구성할 수 있는 블록을 의미합니다. HTML Element를 확장하고 재사용 가능한 형태로 구현이 가능하며 Vue.JS에서 사용된 모든 컴포넌트는 하나하나가 인스턴스라고 볼 수 있습니다. 컴포넌트는 일반적으로 전역 컴포넌트와 지역 컴포넌트가 있습니다. 컴포넌트 이름으로 template속성에서 사용할 HTML 태그를 직접 정의하여 사용할 수 있고, 컴포넌트 내용으로 template, data, methods 등의 인스턴스 옵션 속성을 정의하여 사용할 수 있습니다. 1) 전역(Global) 컴포넌트 인스턴스 밖에서 Vue.component() 형태로 등록할 컴포넌트의 이름과 내..

오늘은 Vue.js step 2. 인스턴스(instance)에 대해 포스팅하려고 합니다. Vue.JS에서 인스턴스란 Vue를 구성하는 가장 기본적인 베이스이며 객체이고, Vue의 라이프사이클의 시작점으로 여러 동작들의 초기화 작업을 수행합니다. 일반적으로 var vm = new Vue({ // 옵션 }) 형태로 인스턴스를 생성하며, 인스턴스 생성자라고 표현합니다. vue 인스턴스의 가장 대표적인 옵션은 다음과 같이 6가지가 있습니다. 옵션 설명 el Vue가 실행될 HTML의 DOM 요소를 지정. Vue 인스턴스에 연결할 HTML 요소 data Vue가 관찰하는 data 객체를 지정, 변경 사항을 즉시 감지 computed 화면 로직 제어와 관련된 함수를 정의하고 계산된 값을 리턴해줌 methods 화면..

오늘은 Vue.JS를 시작하기 위한 기본 환경설정에 대해 포스팅 하려고 합니다. 본 포스팅을 Vue.js에 대한 공부 및 쉽고 간단하게 시작하기 위한 step by step 형태로 이어가도록 하겠습니다. Vue.JS에 대해 차근차근 접근하기 위해 당분간은 아래 환경설정에서 설치한 npm 모듈을 사용하지 않고 html에서 vue lib를 사용하는 방식으로 진행하겠습니다. Vue.JS를 사용하기 위해서는 Node.js visual studio code vue.js vue.js devtools Chrome 확장 프로그램 을 설치하도록 하겠습니다. 1) Node.js를 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runti..