-
vue.js를 사용할 때 의식해야 하는 것은, 화면을 렌더링하는 구조자체는 DOM이 아니라 자바스크립트 데이터 라는 것이다. DOM이 먼저 존재하고, 이것을 읽어들인 후에 조작하는게 아니라, 데이터가 먼저 존재하고 이 데이터를 기반으로 적절한 DOM을 구축한다.
-
입력양식과 동기화하기
-> 데이터와 input양식 입력 항목을 바인딩할 때는 v-model을 사용한다.
-> v-model을 사용하면 바로 데이터와 DOM에 반영된다.
-> 기본적으로 문자열을 입력값으로 받지만 v-model.number를 이용하면 입력값을 숫자로도 받을 수 있다. -
기본적인 옵션 구성
var app = new Vue({
// 1) 마운트할 요호
el : '#app',
// 2) 사용할 데이터
data: {
message: 'Hello Vue.js'
},
// 4) 산출 속성
computed: {
computedMessage: function() {
return this.messsage + '!'
}
},
// 5) 라이프사이클 훅
created : function() {
//하고싶은 처리
},
// 6) 애플리케이션에서 사용할 메서드
method: {
myMethod: function() {
//하고싶은 처리
}
}
})- 라이프사이클 훅
-> vue.js는 라이프사이클을 미리 등록해서 적절한 시기에 자동으로 호출한다. 이러한 시점을 낚아채서 (hook) 우리가 원하는 처리를 할 수 있게 도와준다.
- beforeCreate : 인스턴스 생성되고 리액티브 초기화 일어나기 전
- created :
- 인스턴스 생성되고 리액티브 초기화 일어난 후
- 데이터 초기화 직후 호출되어 아직 DOM이 구축되지 않은 상태
- 따라서, $el, getElmentById()로 DOM접근이 불가하다.
- beforeMount : 인스턴스 마운트되기 전
- Mounted :
- 인스턴스 마운트된 후
- DOM을 만든 직후에 호출되어 $el, getElmentById()를 사용할 수 있으나 모든 자식 컴포넌트가 마운트되는 것을 보장하진 않는다.
- beforeUpdate : 데이터가 변경되어 DOM에 적용되기 전
- updated : 데이터가 변경되어 DOM에 적용된 후
- beforeDestroy : Vue인스턴스가 제거되기 전
- destroyed : Vue인스턴스가 제거된 후
- errorCaptured : 임의의 자식 컴포넌트에서 오류가 발생했을 때
-
data에 정의한 값을 렌더링할때는 이중괄호로 감싸 템플리에 입력한다. Mustache기법이라고도 한다.
<div id=app> <p>{{ message }}</p> </div>-> Mustache는 텍스트 콘텐츠를 위한 기법으로 엘리먼트의 속성으로 사용할 때는 적용할 수 없다. 속성에 바인딩하려면 v-bind를 사용해야 한다.
// X <input value="{{message }}"></input> // O <input v-bind:value=message"></input> -
method 내부에서 data또는 다른 메서드에 접근하기
-> template내부에서는 속성이름만으로 사용할 수 있지만, method내부에서는 this를 붙여야한다.
-> this는 인스턴스를 말하며 new Vue()인스턴스의 리턴 값을 나타낸다. 만약 인스턴스가 컴포넌트라면, this는 컴포넌트 인스턴스 자체를 나타낸다. -
조건 분기 : 조건이 true일때만 요소를 출력하게 해준다.
- v-if :
- 조건을 만족하지 못하면 주석으로 출력된다. (DOM레벨에서 제거됨)
- 따라서, 모든 감시도 제거됨.
- v-show :
- 조건을 만족하지 못하면 display:none으로 스타일로 보이지 않게 만든다.
- 따라서 눈에 보이지 않더라도 리액티브데이터에 대한 내부적인 감시가 일어나는 사실을 주의하자.
- v-if :
-
v-if, v-else-if, v-else디렉티브를 조합해서 그룹으로 만들면 여러개의 조건을 지정할 수 있다. v-if, v-else-if, v-else와 같이 디렉티브 내부에 있는 엘리먼트의 경우 속성의 상태가 남거나 트랜지션이 일어나지 않는 등 예상하지 못한 문제가 발생할 수도 있다. 이러한 경우 각각의 요소에 유니크한 key를 설정해 문제를 해결할 수 있다.
-
반복해서 렌더링하고 싶을 땐 v-for디렉티브 사용한다.
- 변하지 않는 유니크 키 사용하기 : 예를들어 배열의 인덱스는 유니크하지만 요소를 제거하거나 섞으면 변하게 된다. 이는 오류를 발생시키는 경우가 많으니 주의해야한다.
- 다른 v-for라 하더라도 같은 부모 요소 내에 있을 경우 키가 중복되면 안된다. 키중복으로인해 오류가 발생한다.
<ul> <li v-for="item in list" :key="item.id">...</li> <li v-for="item in list" :key="item.id">...</li> </ul>
-
DOM을 직접 참조하는 $el와 $refs
- 데이터 바인딩 덕에 DOM에 직접 접근하지않아도 내용을 변경할 수 있다. 하지만 상황에 따라서 직접DOM에 접근해야할 이리 필요할 수도 있다. (예를들어 요소의 위치와 높이는 DOM에 직접 접근해야 알 수 있음)
- DOM에 접근할 때는 인스턴스 속성 $el, $refs를 사용한다. mounted이후부터 사용할 수 있다.
