VueJS 62

[VueJS] v-model, v-once

v-model (양방향 데이터 바인딩) 양방향 데이터 바인딩으로 주로 폼과 입력을 다룰 때 사용한다. 모델이 업데이트되면서 뷰가 업데이트되고, 뷰가 업데이트되면서 모델이 업데이트될 때 작동한다. 이로 인해 애플리케이션 모델의 데이터가 UI와 항상 동기화 할 수 있다. {{message}} input 창에 데이터를 입력해보면 v-model로 message가 바인딩되어 있어서 바로바로 입력한 값이 나온다. 입력할 때마다 변경되는 것 말고 다 입력한 후에 변경하고 싶으면 수식어로 ".lazy"라는 걸 사용할 수 있다. {{message}} 이렇게 하면 모두 입력 후 포커스가 input 창에서 벗어나면 그때 변경된다. v-once (단방향 데이터 바인딩) 하나의 요소나 컴포넌트를 딱 한 번만 렌더링 한다. 렌더..

VueJS 2021.01.21

[VueJS] computed와 methods

둘의 차이점 - computed (계산된 속성) 1. 어떤 값을 파생하려고 할 때 유용하다. 2. 기본값이 업데이트될 때마다 값이 자동으로 업데이트 된다. 3. 루프가 변경되지 않아도 다시 계산할 필요가 없는 값을 반복적으로 계산하지 않기 위해 캐싱된다. 4. 매개변수를 받을 수 없다. - methods (메서드) 1. Vue 인스턴스에 바인딩된 함수 2. 명시적으로 호출될 때만 실행된다. 3. 매개변수를 받을 수 있다. 4. 자바스크립트 함수가 필요한 동일한 상황에서 유용하다. 버튼을 눌러 count를 1씩 올리는 걸 computed와 methods를 쓰는걸 한번 해보자... computed로 count 올리기 {{ computedCount }}add computed를 쓴 소스 computed로 cou..

VueJS 2021.01.20