beomy

이번 포스트에서는 Vue.JS에서 비슷한 특징을 가진 computed 속성과 watch 속성의 특징을 이야기 하려고 합니다. 1. computed 속성 템플릿 문법([Vue.JS] 템플릿 문법 참고)에서 JavaScript 표현식을 사용하면, 쉽게 원하는 데이터를 DOM에 그릴 수 있습니다. 하지만 복잡한 연산을 템플릿 안에서 하게 되면, 코드를 이해하고, 유지보수하기 어려워집니다. {{ message.split('').reverse().join('') }} 위의 예제는 템플릿 문법 안에서 JavaScript를 사용하여 message를 역순으로 출력한 예제입니다. 지금은 단순해 보일 수도 있지만 좀 더 복잡한 로직을 사용한다면 computed 속성을 사용하는 것이 좋습니다. ..

Vue.JS 공식 문서를 따르면, Vue는 엄격하게 MVVM 패턴과 관계되어 있지 않지만, MVVM 패턴에 영감을 받았다고 합니다.([디자인패턴] MVC, MVP, MVVM 비교 참고) MVVM 패턴의 특징 중 하나가 데이터 바인딩입니다. Model이 업데이트 되면, 데이터 바인딩으로 인해 View가 업데이트 됩니다. Vue 인스턴스 만들기 Vue 어플리케이션을 만드는 것은 Vue 인스턴스를 만드는 것에서 시작됩니다. Vue 어플리케이션의 구조는 루트 Vue 인스턴트 밑에 하위 컴포넌트가 붙는 컴포넌트 트리 구조입니다. Root Instance └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ Cle..