본문 바로가기

Programming116

뷰 데이터 바인딩(Vue Data Binding) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 템플릿 (Vue Template) HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성을 의미합니다. 데이터 바인딩 (Data Binding) HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미합니다. 데이터 바인딩의 주요 문법으로 '.. 2022. 11. 30.
뷰 라우터 (Vue Router) - 네임드 뷰(Named View) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 라우터 (Vue Router) 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리를 의미합니다. 뷰 라우터는 총 3가지(기본 라우터, 네스티드 라우터, 네임드 뷰)가 있으며, 본 글에서는 네임드 뷰에 대해서 정리하였습니다. 네임드 뷰 (Named View) 한 화면에 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식 네스티드 라우터와의 .. 2022. 11. 29.
뷰 라우터 (Vue Router) - 네스티드 라우터 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 라우터 (Vue Router) 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리를 의미합니다. 뷰 라우터는 총 3가지(기본 라우터, 네스티드 라우터, 네임드 뷰)가 있으며, 본 글에서는 네스티드 라우터에 대해서 정리하였습니다. 네스티드 라우터 한 화면에 최소 2개 이상의 컴포넌트를 표시하는 경우 사용하기 적합한 라우터 상위 컴포넌트 1.. 2022. 11. 28.
뷰 라우터 (Vue Router) - 기본 라우터 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 라우터 (Vue Router) 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리를 의미합니다. 뷰 라우터는 총 3가지(기본 라우터, 네스티드 라우터, 네임드 뷰)가 있으며, 본 글에서는 기본 라우터에 대해서 정리하였습니다. 기본 라우터 한 화면에 하나의 컴포넌트만 표시하는 경우 사용하기 적합한 라우터 사용 태그 뷰 기본 라우터 구현시 .. 2022. 11. 25.
뷰 컴포넌트 (Vue Component) 통신 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 컴포넌트 통신 뷰는 하나 이상의 뷰 컴포넌트로 구성되며, 각각의 고유한 유효 범위를 지니고 있어 타 컴포넌트의 데이터를 직접적으로 참조할 수 없습니다. 따라서 뷰 프레임워크 자체에서 정의한 상/하위 컴포넌트 관계의 특성을 이용하여 데이터 및 이벤트를 전달합니다. 상/하위 컴포넌트 관계에서의 통신 컴포넌트 간의 상/하위 관계를 지정하는 속성은 별도로 .. 2022. 11. 24.
뷰 컴포넌트 (Vue Component) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 컴포넌트 (Vue Component) 화면을 구성할 수 있는 블록단위의 특정 영역을 의미합니다. 즉, 컴포넌트를 조합하여 화면을 영역별로 구성할 수 있습니다. 뷰 컴포넌트는 트리 구조를 가지고 있습니다. 트리 구조: 각 노드별 부모-자식 관계가 생기는 구조 컴포넌트 종류 컴포넌트는 전역 컴포넌트와 지역 컴포넌트로 크게 두종류가 있습니다. 전역 컴포넌.. 2022. 11. 23.
뷰 인스턴스 (Vue Instance) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 인스턴스(Instance) 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이며 필수 조건입니다. 형식 new Vue({ ... }); 옵션 속성 뷰 인스턴스 생성시 정의가 가능한 요소이자 속성을 의미합니다. 종류 el: 뷰로 만든 화면이 그려지는 시작점을 지정하는 속성 template: 화면에 표시할 HTML, CSS 등의.. 2022. 11. 22.