개발/Vue.js6 05. 템플릿 & 프로젝트 구성 1. 뷰 템플릿 2. 뷰 프로젝트 구성 방법 1. 뷰 템플릿 : html, css 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 html로 변환해 주는 속성. 템플릿에서 사용하는 뷰의 속성 데이터 바인딩 자바스크립트 표현식 디렉티브 이벤트 처리 고급 템플릿 기법 디렉티브 v-접두사를 가지는 모든 속성 처음뵙겠습니다. 개자이너입니다. 디렉티브 이름 역할 v-if 참/거짓을 판단해 html태그를 화면에 표시하거나 표시하지 않는다. v-for 지정한 뷰 데이터의 개수만큼 html태그를 반복 출력한다. v-show v-if와 비슷하지만 v-show는 css효과(display:none;)을 주어 실제 태그는 남기고 화면상으로 보이지 않게 할 수 있.. 2019. 9. 25. 04-2. 상용 웹 앱을 개발하기 위한 필수 기술들 - 뷰 HTTP통신 1. 웹 앱의 HTTP 통신 방법 * HTTP (HyperText Transfer Protocol) : 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜 . * 프로토콜 (Protocol) : 컴퓨터나 단말기 간에 통신하기 위해 상호간에 정의한 규칙. 웹 앱 HTTP 통신 : 웹 앱에서 데이터를 요청함. 대표적으로 jQuery의 ajax (서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법)이 있다. 뷰에서 ajax를 지원하기 위한 라이브러리 1-1. 뷰 리소스 1-2. 엑시오스(axios) 1-1. 뷰 리소스로 데이터 받아오기 뷰 라이브러리 불러오기 1-2. 엑시오스(axios) 가장 많이 사용되는 http 통신 라이브러리. * a.. 2019. 9. 24. 04-1. 상용 웹 앱을 개발하기 위한 필수 기술들 - 뷰 라우터 01. 뷰 라우터 02. 뷰 HTTP통신 01. 뷰 라우터 1. 라우팅 라우팅 : 웹 페이지 간의 이동 방법 라우팅의 장점 화면 간 전환이 매끄럽다 빠른 조작으로 어플리케이션의 사용자 경험을 향상시킬 수 있다 2. 뷰 라우터 뷰 라우터 : 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 뷰 라우터의 기능 : 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다. 페이지 이동 태그 화면에서는 로 표시되며 클릭하면 to에 지정한 URL로 이동합니다. 페이지 표시 태그 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역입니다. 뷰 라우터를 이용한 페이지 이동 예제 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 + ) 라우터 URL의 해시 값(#)을 없애는 방법 var rout.. 2019. 9. 6. 03. Vue.js 개발 필수단위 - 인스턴스&컴포넌트 뷰 인스턴스 01. 뷰 인스턴스의 정의와 속성 02. 뷰 인스턴스 옵션 속성 03. 뷰 인스턴스의 우효 범위 04. 뷰 인스턴스 라이프 사이클 01. 뷰 인스턴스의 정의와 속성 * 뷰 인스턴스 : 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 new Vue({ ... }); * 뷰 인스턴스 생성자 : 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할 때 기존에 포함된 기능과 더 불어 기존 기능을 쉽게 확장하여 사용하는 기법이다. (Vue) 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해 사용한다. 02. 뷰 인스턴스 옵션 속성 * 뷰 인스턴스 속성 : 뷰 인스턴스.. 2019. 8. 26. 02. Vue.js 필수 플러그인 - github https://joshuajangblog.wordpress.com/tag/아톰-필수-플러그인/ 아톰 필수 플러그인 – Captain Pangyo joshuajangblog.wordpress.com 사용하기 좋은 아톰 플러그인 모음 블로그 2019. 8. 25. 01. Vue.js 소개 웹 개발을 위한 간단한 뷰 개념 정리 Vue.js란? Vue.js란? "웹 페이지 화면을 개발하기 위한 프런트엔드(프로세스 단계)의 프레임워크(뼈대)" *프런트엔드 : 프로세스의 처음과 마지막 단계 *프레임워크 : 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술 뷰의 장점 배우기가 쉽다 성능이 우수하고 빠르다 리액트의 가상돔(virtual DOM)기반 렌더링 특징과 앵귤러의 데이터 바인딩 특성을 모두 가지고 있다. Vue.js의 특징 UI 화면단 라이브러리 뷰(Vue.js)는 UI화면 개발 방법 중 하나인 MVVM패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리입니다. *MVVM : 화면을 Model - View - ViewModel 로 구조화하여 개발하는 방식 *뷰 :.. 2019. 8. 22. 이전 1 다음 반응형
