본문 바로가기

JS 프레임워크16

뷰 컴포넌트 컴포넌트란? 컴포넌트란 조합하여 화면을 구성할 수 있는 블럭을 의미. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 할 수 있다. 컴포넌트 등록 지역(local)컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고 전역(Global)컴포넌트는 여러 인스턴스에서 공통으로 사용 전역 컴포넌트 등록 코드 컴포넌트 등록 인스턴스가 생성되고, 인스턴스 내용이 화면요소로 변환될 때 컴포넌트 태그도 함께 변화된다. 컴포넌트 태그에 정의한 컴포넌트 내용은 사용자가 사용자가 볼 수 있는 형태의 화면요소로 최종 변환. 전역 컴포넌트를 등록하려면 HTML에서 사용할 태그 이름을 컴포넌트 이름으로 작성하고, 중괄호{}안에는 HTML태그가 실제로 화면에서 그려질 때 표시될 내용을 작성해야 한다. 전역 컴포넌트.. 2021. 3. 31.
Vue 인스턴스 뷰 인스턴스의 정의와 속성 뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성 해야 하는 기본 단위. 뷰 인스턴스 생성 뷰 인스턴스 생성 new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. Vue생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 생성자는 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정객체에 저장해 놓고 새로 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법 뷰 인스턴스 생성 인스턴스를 생성할 때 재정의할 data, el, template등의 속성을 의미 el 속성 역시 미리 정의 되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔.. 2021. 3. 31.
Vue 환경설정 및 Hello world Vue Js를 사용하기 위해서는 Node js를 설치 해야한다. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node -v 위에 코드를 맥인 경우 터미널, 윈도우인 경우 터미널에 입력해서 node가 제대로 설치 되었는지 확인하자. Vscode Vue install Vetur : VSCode에서 돌아가는 Vue 개발 툴입니다. vue : Vue 문법 검사기라고 생각하시면 됩니다. Vue VSCode Snippets : Vue 문법을 미리 알려주는 친구입니다. 첫번째 프로젝트 {{message}} HTML파일을 생성하고 위와 같이 코드를 작성 하자 이후 Open .. 2021. 3. 30.
Vue JS란 1. Vue Js란 vue.js는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다. vue.js는 여타 다른 프론트엔드 프레임워크보다 배우기 쉽다는 장점이 있다. 리엑트와 앵귤러라는 프레임워크의 장점들을 쏙 빼와서 더욱 빠르고 가볍게 만든 프레임워크라고 한다. 2. Vue Js 장점 1. 배우기가 쉽다 - 입문자에게 좋은 프레임워크이다. 2. 리액트와 앵귤러에 비해 성능이 우수하다. 3. 리액트와 앵귤러의 장점을 갖고 있다. 3. Vue Js 특징 MVVM 패턴의 뷰 모델(View Model)에 해당하는 화면단 라이브러리이다. MVVM이란 화면을 모델(Model) - 뷰(View) - 뷰모델(View model)로 구성화 하여 개발하는 방식 이러한 방식은 화면의 요소들을 제어하는 코드와 데이터 .. 2021. 3. 30.