Vue Templates란? HTML, CSS 등의 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성. 따라서, Vue로 그리는 화면의 요소들, 함수, 데이터 속성은 모두 Templates 안에 포함된다. 그래서 Vue Template? 이라고 말하면 낯설겠지??? 우리는 이제껏 많이 template를 많이 사용해봤다. 아래 두 가지 코드를 확인해보자. 예제 1) 예제 2) ...

오늘은 지금까지 정리한 Vue에 대해 중간 정리를 하려고 한다. 이제까지 화면의 뼈대를 작업하는 방법에 대해 학습했다고 한다. (허허허...) 간략하게 다시 말하자면, 아래와 같이 정리할 수 있다. 인스턴스 화면을 생성하기 위한 단위 1) 정의 및 속성 2) 유효 범위 3) 라이프 사이클 컴포넌트 화면을 구분화하는 방법 1) 컴포넌트 등록 2) 지역 컴포넌트 vs 전역 컴포넌트 컴포넌트 통신 컴포넌트 간 데이터 전달 방법 1) 상위 → 하위 2) 하위 → 상위 3) 같은 레벨의 컴포넌트 간의 통신 4) 관계없는 컴포넌트 간의 통신 라우터 화면 전환 방법 1) Nested Router 2) Named View (추가적으로 HTTP 통신 방법) 이 다음 시간에는 Vue Template에 대하여 학습할 예정이..

사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시할 때 필요한 "HTTP" 통신! Vue에서도 제이쿼리의 Ajax를 지원하기 위한 라이브러리를 제공한다. 1) Vue Resource : 2016년 말, 지원 중단됨 this.$http.get(URL).then(successCallback, failCallback); : Vue Resource에서 제공하는 API인 this.$http.get()을 사용하여 해당 URL에서 제공하는 특정 데이터를 받아옴. 2) Axios : 현재 가장 많이 사용됨 axois.get(URL).then( ); : Get 방식으로 요청. 이외에도 여러 설정 값을 추가하여 함께 호출할 수 있음. 오늘은 간략하게 소개하며 넘어가는 정도~ 이렇게 간략하면 어떻게 코딩하냐......

저번 퀴즈에 대한 나의 풀이이다. 코드를 보고 이해한 대로 적은 내용이다. 나만의 설명 : "/main" URL로 들어온다면 "Main"이라는 컴포넌트를 등록하고, 그 하위로 동일한 "/main" URL일 때 MainForm을 등록한다. 나만의 설명 : "Main" 컴포넌트는 template 속성을 통해 `~~~~`라고 정의한다. 이 때, 코드를 이용하여 "MainForm" 컴포넌트를 표시하겠다! 위에서 등록했던 컴포넌트들을 표시하기 위해 아래와 같이 HTML 작업을 한다. 나만의 설명 : "Go to Main" 문구를 클릭하면 "/main" URL과 연결된 화면을 표시하라! 이로써 코드는 완성. 저장 후 화면을 띄우면 아래와 같이 표시되는 것을 확인할 수 있다. "Go to Main" 클릭 시 아래와 ..

퀴즈와 함께 Nested Router 실습하기!! 퀴즈로 3가지 항목을 풀어보자!! 이전에 실습으로 /login 또는 /list를 해보았으니까~ /main도 할 수 있겠지??? 일단 GOGO!! 답은 다음 이 시간에~!!

해당 URL에 해당하는 여러 개의 View(컴포넌트)를 동시에 랜더링한다. 따라서 각 컴포넌트에 해당하는 name 속성과 router-view 지정이 필요하다. 만약, 위 코드에서 router-view에 name 속성을 하지 않을 경우 아래 코드 중 "default"라고 표시된 영역이 영역에 표시된다. 이를 통해 알 수 있는 것은 nested router의 경우 "children" 속성이 존재하고, named view는 components에 일괄적으로 의 name 속성과 컴포넌트를 연결한 것이다. 그 결과, 아래 화면이 탄생!!