잡다한 지식의 블로그

Vue.js CLI란?- Vue.js 애플리케이션의 개발 환경을 설정하고 관리하기 위한 커맨드 라인 도구.- 프로젝트를 빠르게 시작하고, 번들링, 테스팅 및 배포등의 작업을 쉽게 처리 가능.- 프로젝트에 필요한 라이브러리와 도구 등을 자동으로 설치하고 구성가능. Vue.js CLI 설치- 먼저 CLI를 설치하기 위해서는 node.js가 설치가 되어 있어야 한다. 따라서 아래의 주소에서 사용자의 환경에 맞게 설치.https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org - node.js를 설치하였다면 그 다음으로 명..

Vue.js에서 Component란? - 조합하여 화면을 구성할 수 있는 블록 - 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발가능. - 코트를 쉽게 이해할 수 있으며 재사용이 쉬워진다. Vue.js의 Component의 종류 1. 전역(Global) - 모든 범위의 여러 인스턴스에서 공통으로 사용이 가능. - Vue.component()를 사용하여 등록 2. 지역(Local) - 특정 인스턴스에서만 사용이 가능. - 인스턴스에 components속성을 추가하여 사용. Vue.js의 Component(Global)의 예 {{ name }} vue1 변경 {{ name }} vue2 변경 Vue.js의 Component(Local)의 예 {{ name }} vue2 변경

지금 까지는 한개의 Vue로 한개의 인스턴스를 사용하였지만, 여러개의 Vue로 두 개 이상의 인스턴스도 사용이 가능하다. Vue.js에서 멀티 인스턴스 사용 예 {{ name }} vue1 변경 {{ name }} vue2 변경 위의 예 처럼 div에 사용되는 id값을 통하여 Vue를 여러개 생성하고 d값을 지정하여 멀티 인스턴스를 사용할 수 가 있다. 더 나아가서 위의 예에서 app에 해당하는 vue에서 app-1에 해당하는 뷰의 데이터 또는 함수를 이용하고 싶을 경우에는 아래의 예와 같이 "const 이름"을 사용하면 된다. {{ name }} vue1 변경 {{ name }} vue2 변경

Vue.js에서 v-for란? - HTML 태그 속성 부분에서 사용하는 반복문. - v-for = "(item, index) in(of) list" :key="key"의 형식을 가진다. - v-for문을 사용하기 위해선 key값을 지정해줘야 하며 이 값은 유니크 값으로 해주는 것이 좋다. Vue.js에서 v-for 사용 예 {{ people[0].name}} {{people[0].age}} {{ people[1].name}} {{people[1].age}} {{ people[2].name}} {{people[2].age}} {{ people[3].name}} {{people[3].age}} {{ person.name}} {{person.age}}

Vue.js에서 조건부 렌더링이란 - 조건에 따라 화면에 출력하는 것. - 조건이 참(true)일 경우 화면에 출력되고, 거짓(false)일 경우 출력되지 않는다. - v-if, v-else, v-else-if 등이 있다. Vue.js에서 v-if - 조건에 따라 블록을 출력하기 위해 사용되며, 참(ture) 값을 가질때만 출력한다. Vue.js에서 v-else - v-if에 대한 else블록을 나타낼 수 있다. - v-if 또는 v-else-if 뒤에 있어야만 Vue가 인식이 가능하다. Vue.js에서 v-else-if - 2.1.0 버젼부터 새롭게 추가되었으며 v-if에 대하여 else if 역활을 한다. - v-else와 마찬가지로 v-if 또는 v-else-if 뒤에 와야지만 Vue가 인식이 가능..

Vue.js에서 Class와 Style Binding - Class와 Style 둘 다 속성이므로 다른 속성과 마찬가지로 v-bind를 사용하여 문자열 값을 동적으로 할당할 수 있다. - 클래스를 통적으로 이용하기 위해 객체를 v-bind:class에 전달할 수 있다. - v-bind:class는 :class로 줄여서 사용이 가능하다. Vue.js에서 Class와 Style Binding의 예 hello hello click

Vue.js에서 Watch속성이란? - 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성. Vue.js에서 Watch속성의 장점. 1. 비동기 동작 처리 가능 - Watch 함수 내에서 비동기 동작을 처리할 수 있다. 2. 복잡한 데이터 변경 감지 - 객체 또는 배열과 같은 복잡한 데이터 구조에서도 사용 가능. 3. 계산된 속성과의 조합 - 계산된 속성을 Watch에 의존시키고, 해당 계산된 속성이 변경될 때 마다 Watch 함수가 실행되도록 할 수 있다. Vue.js에서 Watch속성의 단점 1. 가독성이 떨어질 수 있다. - Watch 함수 내에서 과도한 로직을 처리하면 코드를 이해하기 어려워질 수 있다. Vue.js에서 Watch 속성의 사용 예 {{ message }} Clcik

Vue.js에서 Computed란? - 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성. Vue.js의 Computed속성의 장점 1. Computed 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산.하고 결과 값을 저장. 2. 코드의 재사용성과 가독성이 높다. Vue.js에서 Computed와 Method의 차이점 - Computed는 라이프 사이클에 영향을 받지 않는다. template 내부에 선언된 computed 중에서 해당 함수와 연결된 값이 바뀔 때만 해당 Computed가 재연산한다. - Method는 라이프 사이클에 영향을 받는다. template 내부에 선언된 method 중에서 update 라이프사이클이 동작한다면 함수를 모두 실행한다. V..

Vue.js에서 Event란? - 클릭, 스크롤 등 사용자의 행동과 관련된 결과를 출력 시키는 행위. - v-on 디렉티브를 사용. Vue.js에서 이벤트 사용 예 click me click me 더하기 {{year}} 빼기 {{year}}

Vue.js의 Data-Binding 단방향 바인딩(One-way Binding) - 컴포넌트의 데이터가 변경되면 UI요소 내용 변경 양방향 바인딩(Two-way Binding) - 폼테이터와 폼 양식 간의 바인딩 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법. 기본적인 데이터 바인딩 방식은 콧수혐 괄호방식. ex) {{ }} Vue.js에서 Data-Binding 예 티스토리 티스토리