Vue

1. Node.js Javascript 기반의 언어인 Vue.js를 브라우저 환경이 아닌 곳에서 빌드하고 구동시키기 위해서는 별도의 Runtime 환경을 제공하는 node.js를 설치해야 한다. Node.js, npm이 설치가 되어있지 않다면 Node.js에 가서 설치

Vue.js의 핵심은 간단한 템플릿 구문을 사용하여 데이터를 선언적으로 DOM에 렌더링 할 수 있다.(<div> 태그 안에 {{변수명}} 와 같은 구문을 선언해서 html DOM 에 데이터를 전달하는 방식)정적으로 보일 수 있겠지만 Vue 내부에서 많은 task를

엘리먼트의 표시 여부를 간단히 제어할 수 있음텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩할 수 있음을 보여줌Vue 엘리먼트가 Vue에 삽입/업데이트/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 전환 효과 시스템 제공배열의 데이터를 바인딩하여 반복문을

사용자와 앱을 상호 작용할 수 있게 해주는 디렉티브Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가할 수 있음v-text, v-html등은 모두 단방향 디렉티브input 입력과 앱 상태를 양방향으로 바인딩 해주는 양방향 디렉티브

Components 컴포넌트 시스템은 독립적이며 재사용할 수 있는 컴포넌트들로 구성하여 대규모 앱을 구축할 수 있게 해주는 추상적 개념이다

관례적으로, Vue 인스턴스를 참조하기 위해 종종 vm(ViewModel의 약자)을 변수로 사용Vue 인스턴스를 생성할 때는 options 객체를 전달해야 함일부 optionsdata : Vue 인스턴스의 데이터 객체Type : Object | Functionprops

Vue 인스턴스가 생성될 때 data 객체에 있는 모든 속성이 Vue의 반응형 시스템에 추가됨각 속성 값이 변경될 때 뷰가 반응하여 새로운 값과 일치하도록 업데이트됨data에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형보통 Vue component 파일 내

각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거침예를 들어,데이터 관찰 설정이 필요한 경우템플릿을 컴파일하는 경우인스턴스를 DOM에 마운트 하는 경우데이터가 변경되어 DOM을 업데이트 하는 경우그 과정에서 사용자 정의 로직을 실행할 수 있는 <span s

Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용내부적으로 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일 함반응형 시스템과 결합된 Vue는 앱 상태가 변경 될 때 최소한으로 DOM을 조

템플릿 내에 간단한 표현식이 아닌 복잡한 로직이 필요할 때 Computed 사용데이터 바인딩 가능Vue는 vm.reversedMessage가 vm.message에 의존하는 것을 안다.따라서 vm.message이 바뀔 때 vm.reversedMessage에 의존하는 바인

Watch 데이터 변경에 반응하여 실행됨 비동기식 또는 시간이 많이 수용되는 조작을 수행하려는 경우 가장 유용함 위 같은 경우 비동기 연산(API 엑세스)를 수행하고, 연산의 수행 횟수를 제한하고 최종 응답을 얻을 때까지 중간 상태를 설정할 수 있다. (compute

일반적으로 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 데이터 바인딩이 두 속성은 v-bind를 사용하여 처리할 수 있음문자열 연결에 간섭하는 것은 짜증나는 일이며 오류가 발생하기 쉬움Vue는 class와 style에 v-bind를 사용할 때 특별히 향상된

v-if 디렏티브는 조건에 따라 블록을 렌더링하기 위해 사용된다.디렉티브의 표현식이 true 값을 변환할 때만 렌더링 된다.v-else와 함께 else 블록을 추가하는 것도 가능하다.v-else 엘리먼트는 v-if 엘리먼트 또는 v-else-if 엘리먼트 바로 뒤에 있

v-for 디렉티브를 사용하여 배열 기반으로 리스트를 렌더링v-for 디렉티브는 item in items 형태로 특별한 문법이 필요in 대신 of를 구분자로 사용 가능items : 원본 데이터 배열item : 반복되는 배열 엘리먼트의 별칭v-for 블록 안에는 부모 범

이벤트 핸들링 이벤트 청취 v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다. 메소드 이벤트 핸들러 복잡한 로직 사용 시, 이벤트 핸들러에 메소드를 사용한다. 인라인 메소드 핸들러 메소드 이름을 직접 바인딩 하지

Form Input 바인딩 v-model 디렉티브를 사용하여 Form input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다. 입력 유형에 따라 엘리머느를 업데이트 하는 올바른 방법을 자동으로 선택한다. v-model은 기본적으로 사용자 입력 이

Vue의 가장 강력한 기능 중 하나기본 HTML 엘리먼트를 확장하여 \*\*<span style="background-color:- 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타낼 수 있음Vue 컴포넌트는 Vue의 인스턴스<span

컴포넌트 A와 컴포넌트 B가 있다고 가정할 때, 서로 의사 소통을 필요로 한다면부모는 자식에게 데이터를 전달할 수 있어야 하고, 자식은 자신에게 일어난 일을 부모에게 알릴 수 있어야 한다.Vue.js에서 부모-자식 컴포넌트 관계는props는 아래로<span sty

props가 아닌 속성 props가 아닌 속성은 컴포넌트로 전달되지만 props로는 정의되지 않은 속성이다. 임의의 속성 명시적으로 정의된 props는 하위 컴포넌트에 정보를 전달하는데 쓰이지만, 컴포넌트 라이브러리 작성자는 컴포넌트가 사용될 수 있는 상황을 항상 예

다음과 같은 템플릿이 있다고 가정했을 때 message는 부모 데이터에 바인딩 된다.컴포넌트 범위에 대한 간단한 법칙 :<span style="background-color:일반적인 실수는 부모 템플릿의 하위 속성/메소드에 디렉티브를 바인딩하려고 하는 것이다.상위

재사용 가능한 컴포넌트 제작하기 컴포넌트를 작성할 때 나중에 다른 곳에서 다시 사용할 것인지에 대한 여부를 정해놓는 것이 좋다. 일회용 컴포넌트는 단단히 결합되어도 상관없지만, 재사용 가능한 컴포넌트는 깨끗한 공용 인터페이스를 정의해야 하며 사용된 콘텍스트에 대한 가정

루트 엘리먼트 접근 $root 대부분의 경우, 다른 컴포넌트에 접근하거나 직접 DOM 엘리먼트에 접근하는 것을 피하는 것이 좋다. 그럼에도 불구하고, 이러한 접근이 허용되는 경우가 있다. new Vue의 모든 하위 컴포넌트에서는 $root 속성을 이용해 루트 인스턴스에

지금까지 본 $emit을 사용하고 'v-on으로 듣는 방법 이외에도 Vue 인스턴스는 또 다른 이벤트 인터페이스 사용 방법을 가지고 있다.$on(eventName, eventHandler)을 이용한 이벤트 청취$once(eventName, eventHandler)을 이

Enter∙Leave & List Transitions Vue는 항목(html tag, component)이 DOM에 삽입, 갱신 또는 제거 될 때 트랜지션 효과를 적용하는 다양한 방법을 제공한다. CSS 트랜지션 및 애니메이션을 위한 클래스를 자동으로 적용 Anima

Mixins는 Vue 컴포넌트에서 재사용 가능한 기능을 배포하는 유연한 방법이라고 소개한다.믹스인(Mixin) : 다중 상속을 지원하는, 구현된 인터페이스를 의미함의미 그대로, 컴포넌트에 원하는 기능을 실행하는 객체(컴포넌트와 유사)를 커스텀한 뒤 이를 혼합하는 기법이

Vue와 Vue-router를 이용해 싱글 페이지 앱(SPA)을 만드는 것은 매우 쉽다.Vue.js를 사용한다면 이미 컴포넌트로 앱을 구성하고 있을 것이고,Vue-router를 함께 사용하기 위해 추가로 해야 하는 것은<span style="background-c

실제 앱 UI는 일반적으로 여러 단계로 중첩된 컴포넌트로 이루어져 있다.URL의 세그먼트가 중첩된 컴포넌트의 특정 구조와 일치한다는 것은 매우 일반적이다.vue-router를 사용하면 중첩 된 라우트 구성을 사용하여이 관계를 표현하는 것이 매우 간단하다.<rout

<router-link>를 사용하여 선언적 네비게이션용 anchor 태그를 만드는 것과 같이라우터의 인스턴스 메소드를 사용하여도 이를 수행할 수 있다.<router-link>를 클릭 할 때 내부적으로 호출되는 메소드(router.push(...))된다.&lt

때로는 라우트에 연결하거나 탐색을 수행 할 때 Named Routes를 사용하는 것이 더 편리하다.<span style="background-color:\`\`\`javascriptconst router = new VueRouter({ routes: {

리다이렉트는 <span style="background-color:리디렉션은 routes 설정에서 할 수 있다. /a에서 /b로 리디렉션하려면일반적인 redirect(path)route name을 이용한 redirect동적 리디렉션을 위한 Function을 이용한

컴포넌트에서$route를 사용하게 되면, 컴포넌트가 url에만 의족적이게 되어 재사용성이 떨어진다.<span style="background-color:\`\`\`javascriptconst User = { props: 'id', template: 'User

vue-router의 기본 모드는 <span style="background-color:url 해시<span style="color:url에서 <span style="background-color:history 모드를 설정하면 history.pushSt

네비게이션 가드(navigation guard) 란 뷰 라우터로 <span style="background-color:예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술이다.애플리케이션 전역에서 동작하는 전역 가드특정 ur

라우트를 정의 할 때 meta 필드를 포함시킬 수 있다.routes 설정의 각 라우트 객체를 라우트 레코드 라고 한다.라우트 레코드는 중첩 될 수 있으며 <span style="background-color:예를 들어, 위 라우트 구성에서 URL <span

<router-view>는 본질적으로 동적인 컴포넌트이디.때문에 <transition> 컴포넌트를 사용하는 것과 같은 방식으로 트랜지션 효과를 적용할 수 있다.<span style="color:\`\`\`html 대상 라우트와 현재 라우트 간의 관계를

때로는 라우트가 활성화될 때 서버에서 데이터를 가져와야 한다.<span style="color:이때, 두 가지 방법을 사용할 수 있다.탐색 후 가져오기: <span style="background-color:- 탐색하기 전에 가져오기: 라우트 <span

클라이언트 측 라우팅을 사용할 때 <span style="background-color:vue-router는 이러한 것들을 할 수 있으며, 라우트 탐색에서 스크롤 동작을 완전히 사용자 정의할 수 있게 한다.<span style="color:라우터 인스턴스를

번들러를 이용한 앱 제작 시, JavaScript 번들이 매우 크다면 페이지 로딩 시간에 영향을 미칠 수 있다.각 라우트의 컴포넌트를 별도의 단위로 분할하고 경로를 방문할 때 로드하는 것이 효율적일 것이다.Vue의 <span style="background-col

Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다.애플리케이션의 모든 컴포넌트에 대한 <span style="background-color:또한 Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및

Vuex는 단일 상태 트리<span style="color:즉, 이 단일 객체는 모든 애플리케이션의 상태를 포함하며 원본 소스<span style="color:이는 각 애플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미한다.단일 상태 트리를 사용하면 특정

때로는 저장소 상태를 기반하는 상태를 계산<span style="color:<span style="color:\`\`\`javascriptcomputed: { doneTodosCount () { return this.$store.state.todos.

Vuex 저장소에서 실제로 상태를 변경하는 유일한 방법은 변이<span style="color:Vuex mutations은 이벤트와 매우 유사하다.각 mutations에는 타입 문자열 핸들러가 있고 핸들러 함수는 실제 상태 수정을 하는 곳이며, 첫 번째 전달인자로

액션은 mutations와 유사하다. 다른 점은,상태를 mutations시키는 대신 액션으로 mutations에 대한 commit을 한다.<span style="background-color:\`\`\`javascriptconst store = new Vuex.S

단일 상태 트리를 사용하기 때문에 애플리케이션의 모든 상태가 하나의 큰 객체 안에 포함되게 된다.그러나 규모가 커짐에 따라 저장소가 매우 비대해질 수 있다.이를 위해 Vuex는 저장소를 모듈로 나눌 수 있다.각 모듈은 자체 <span style="backgroun

실제로 Vuex는 코드 구조를 제한하지는 않는다. 하지만,애플리케이션 레벨의 상태<span style="color:2. 상태를 변경시키는 유일한 방법은 동기 트랜잭션인 mutation을 commit하는 것비동기식 로직은 캡슐화되어야 하며 action으로 구성위 규