728x90
반응형

프로그래밍 이야기/vue.js 공부 4

vue 인스턴스 생성, 인스턴스옵션 속성

- 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이다 - 인스턴스는 뷰로 화면을 개발하기 위해 빠트릴 수 없는 필수 조건이다. {{message}} -> new Vue({}) : 인스턴스 ->el 속성, data 속성 - 생성자 : 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법으로 일반적으로 객체 지향 프로그래밍에서 사용하는 객체 정의 방식으로 미리 정의된 속성과 메서드를 재활용하기 위해 사용 - new Vue()로 인스턴스를 생성할때 Vue를 생성자라 하는데 이는 뷰 라이브러리를 로딩하고 나면 접근 가능하다 - 생성자를 사용하는 이유는 뷰로 개발..

뷰 (Vue)개발자 도구 설치하기

- 뷰 개발자 도구는 뷰로 개발할 때 도움을 주는 유용한 도구로, 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있다. 1. 구글에서 vue.js devtools 라고 검색 후 첫번째 링크를 클릭한다. 2. 우측 상단에 Chrome 추가 버튼을 클릭한다. 3. 설치여불를 묻는 팝업이 뜨념 확장 프로그램 추가 버튼을 클릭한다. 4. 크롬에 추가되었다! 5. 개발자 도구를 열어보자 windows에서는 단축키 F12이다 마우스 경로는 우측 상단 '세개짜리버튼 클릭 -> 도구 더보기 - > 개발자도구 6. 확장프로그램 확인 - 확장프로그램관리 7. vue 확장프로그램에서 파일 URL에 대한 액세스 허용을 허용상태로 전환한다. 8. 개발자 도구에서 vue 탭을 클릭한다. 9. 각 요소별로 필요한 컴포..

Vue.js 특징 MVVM패턴의 의미와 장점 컴포넌트기반 프레임워크

Vue.js : 웹 페이지 화면을 개발하기 위한 프런트 엔드 프레임워크 화면단 라이버러리 이자 프레임 워크라고 볼 수 있음 -> 뷰의 창시자인 에반 유가 2017년 vue.js 컨퍼런스에서 발표한 프리젠테이션에 사용한 그림 - 뷰 커어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다. 뷰 공식사이트 : www.vuejs.org Vue.js - The Progressive JavaScript Framework | Vue.js Versatile A rich, incrementally adoptable ecosystem that scales between a library and a full-fea..

Vue 프로젝트 매니저로 프로젝트 설치하기

- Vue 프로젝트 매니저를 이용하면 GUI 환경에서 조금 더 쉽게 프로젝트 생성이 가능하다 1. 터미널에서 다음 명령어를 실행한다. vue.cmd ui 2. 그럼 다음과 같이 프로젝트만들기 UI 화면이 나온다 3. 만들기 탭을 클릭한다 나는 workspace 안에서 실행했음으로 바로 프로젝트 작업 폴더가 나온다 여기서 새프로젝트를 만들어보세요 버튼을 클릭하자 4. 프로젝트 만들기 화면이 나온다. 프로젝트 폴더에 vue-project-manager라고 입력했고 패키지 매니저는 npm을 선택했다. 5. 그다음 프리셋 선택에서는 수동으로 선택하기를 누른다. 7. 프리셋 목록을 선택하자. 8. 버전은 3.x, Linter/Formatter / ESLint + Standard Config/ Lint On Sav..

728x90
반응형