Vue.js

뷰란? 2014년을 시작으로 꾸준하게 발전하고 있는 자바스크립트 프레임워크입니다.컴포넌트는 View, Date, Code의 세트라고 생각하면 됩니다.컴포넌트 안에는 HTML 코드가 있고, 이 HTML 코드를 실행하기 위한 자바스크립트 코드 그리고 데이터가 존재합니다.

뷰는 사용해봐도 그냥 옮기는 수업 3일뿐이었던 난 지금부터 해석해보며 vue를 이해해보고자한다.처음 시작한건 template과 script, style을 나누는 것 부터 시작했다.그 후 template(html)을 작성하기 시작했다.첫번째로 진행한것은 입력을 위한 폼인

인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드입니다.모든 vue 앱은 vue 함수로 새 vue 인스턴스를 만드는 것부터가 시작입니다.변수 vm을 인스턴스로 선언한것이죠.이제 이렇게 선언한 후 개발자 도구를 열어 콘솔로그에 vm을 찍어보면 vue 인스턴스에 api

컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능입니다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재 사용성이 올라가고 빠르게 화면 제작이 가능해집니다.아래의 사진 처럼 top, right, left, bottom으로 나눠서 관리한다고 생각하면 됩니다.

이전 블로그에서 다뤗더 컴포넌트라는 웹 화면에서 분리 된 공간?즉 vue 공식 홈페이지의 아래의 사진 처럼쪼개 놓은 컴포넌트에 통신하는 방법에 대해 알아보고자한다.데이터를 내려주는것이 props그렇다면 코드로 한번 작성해서 보자사진과 같이 propsdata로 받아오는

같은 레벨의 컴포넌트는 바로 통신할 수 없기에 root를 통해 event, props로 소통한다.상위 컴포넌트를 이용해서 규칙을 이용해서 개발하면 된다.

뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다.페이지 이동하는 기능을 뷰 라우터로 구현할 수 있다!!실습 코드router-view, router-linkrouter-view)태그는 페이지의 url이 이동했을 때 그

뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미합니다.템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉩니다.데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다. 가장 기본적인 데이터 바인딩 방식은콧수염 괄호 (Mustache Tag)입니

사전적 의미 computed : 계산컴퓨티드(computed) 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성입니다.예시위 코드는 데이터 속성의 문자열을 역으로 변환해주는 코드 reverse를 사용한 코드입니다.이 처럼 콧수염 괄호 안에는 단순하게

컴포넌트 간 통신과 유효 범위vue의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없습니다.그 이유는 컴포넌트마다 자체적으로 고유한 유효 범유 (scope)를 갖기 때문입니다.이는 뷰 프레임워크 내부적으로 정의된 특징입니다.따라서 각 컴포넌

뷰엑스란? 내가 이해한 바로 의하면 컴포넌트간의 처리 저장 공간을 대체해주는 라이브러리이다.결국 vuex를 사용하면 기존 props와 emit을 더 편하게 이용할 수 있다는 장점이있습니다.라이브러리이기에 꼭 설치해야합니다. 설치 후엔 store라는 store.js 파일

https://babeljs.io/ ES6의 여러가지 문법 중 Vue.js 코딩을 간편하게 해주는 문법 학습 const&let, Arrow Function, Enhanced Object Literals, Modules 학습 ES6 란? ECMAScript 2015와

함수를 정의할 때 fuction 이라는 키워드를 사용하지 않고 => 로 대체흔히 사용하는 콜백 함수의 문법을 간결화실습 링크(https://babeljs.io/repl

Vuex는 중앙 위치에서 상태를 저장하여 어떤 컴포넌트라도 쉽게 상호 작용할 수 있게 돕는 라이브러리입니다. state , mutations , actions , getter 4가지 형태로 관리가 되며 관리 포인트는 store 라 불립니다.Vue compone