Props란? : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다.(하위 컴포넌트가 상위 컴포넌트의 값을 바로 참조할 수 없다는 의미를 뜻함) 해당 Props 속성을 이용하여 전달할 수 있는 데이터는 객체, 배열 등 유형과 상관없이 모든 것이 전달 가능하다고 한다. 하위 컴포넌트의 Props 속성 정의 방식은 아래와 같다. Vue.component('child-component',{ props : ['props 속성 이름'] }); 따라서 아래와 같이 코드를 작성했다.아래 코드는 상위 컴포넌트의 message 속성을 하위 컴포넌트에 props로 전달하여 메시지를 출력하는 예제이다. 1. new Vue()로 인스턴스 생성 2. Vue.component()를 이용하여 'child-compone..

MVC 모델 프레임워크에서는 한 화면을 1개의 View로 간주했다. 따라서, 한 화면의 데이터를 해당 화면 영역 어디서든지 호출할 수 있었다. 하지만!!!!!!!! Vue의 경우 컴포넌트로 화면을 구성함으로 같은 웹 페이지라도 데이터를 공유할 수 없다는 것이 함정...... 즉, 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다는 말이다. 그렇다면 데이터를 어떻게 주고 받는 방법이 있을까? 답은 컴포넌트 간 데이터를 주고 받는 방식에 있다. 가장 기본적인 데이터 전달 방법은 아래 그림과 같이 상위(부모)-하위(자식 ) 컴포넌트 간의 데이터 전달 방법이다. 위의 그림을 설명하자면, 아래 표를 살펴보자. 상위 -> 하위 props라는 특별한 속성을 전달 하위 -> ..

이 전글에는 퀴즈를 풀었는데 한꺼번에 작성하고 chrome으로 바인딩하는게 아니었어요... 아놔... Quiz 1. ...Quiz 2. ...Quiz 3. ... 3개의 문제에 대해 총 3개의 답이 나오는 것이었어요..... 그렇다면.. 다시 주석 처리한 후에 따로따로 비교해봐야겠네영... Quiz 1. todo-footer 컴포넌트 전역 등록실습) 결과) Quiz 2.todo-footer 컴포넌트 지역 등록실습) 결과) Quiz 3. 컴포넌트 등록 태그 추가 -> 위의 코드에 녹아있다!!

오늘은 지역&전역 컴포넌트 등록과 관련된 퀴즈를 풀어보려고 한다. 퀴즈 문제는~ 아래 코드에 녹아있다. Quiz 1. todo-footer 컴포넌트 전역 등록 Quiz 2.todo-footer 컴포넌트 지역 등록 Quiz 3. 컴포넌트 등록 태그 추가 정답은 내일~~~ 나름 퀴즈를 풀고 chrome에서 돌려보니 아래와 같이 나왔다.이게 정답일지는 내일 밝혀질 예정!!

전 시간에 지역 컴포넌트 등록하는 방식을 설명했다면, 실습을 한 번 해볼 생각이다... 비교를 위해 전역 컴포넌트 실습 화면에 아래 그림과 같이 코드를 작성했다. 이 코드를 토대로 알 수 있는 내용은?전역 컴포넌트와 지역 컴포넌트를 등록하는 방식 차이를 한 눈에 비교할 수 있을 것이다. 결론: 전역 컴포넌트는 Vue에 html 태그를 이용하여 직접 등록: 지역 컴포넌트는 cmp 변수를 사용하여 컴포넌트 내용을 정의한 후 new Vue하여 태그명과 컴포넌트 내용을 연결하게된다. 이 코드를 저장하여 화면에 띄우면 아래 그림과 같은 결과가 표시된다.

전역 컴포넌트 등록에 대한 실습은 어제 정리를 했고~ 오늘은 지역 컴포넌트 등록에 대해 설명하려고 한다~~~!!! local component는 아래 그림과 같이 등록하면 된다. 다음과 같은 순서로 해당 코드를 확인해보자 1. new Vue 인스턴스 부분에 components 속성이 추가되었다.2. 그리고 그 안에는 '컴포넌트 이름': 변수명을 작성하였다. (여기서 변수는 컴포넌트 내용으로 판단된다.) 이를 통해 new Vue 인스턴스에서만 활용할 수 있는 지역 컴포넌트를 등록하게 된 것이다. (여기서 잠깐!! 전역 컴포넌트를 어떻게 등록했지? 기억하는가!!!)기억이 안난다면, 이 전글로 고고씽~ 다시말해서, 지역 컴포넌트는 등록 시 작성했던 변수 이름을 따라가다보면 위쪽에 선언해 준 해당 변수명의 값이..