vue.js/vue.js 공식문서
vue.js 공식문서 따라하기 - List Rendering(리스트 렌더링)
v-for 엘리먼트에 배열 매핑 v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. v-for 디렉티브는 item in items 형태로 특별한 문법이 필요합니다. 여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭 입니다. 기본 예제 {{ item.message }} v-for 블록 안에는 부모 범위 속성에 대한 모든 권한이 있습니다. v-for는 또한 현재 항목의 인덱스에 대한 두 번째 전달인자 옵션을 제공합니다. {{ parentMessage }} - {{ index }} - {{ item.message }} in 대신에 of를 구분자로 사용할 수 있습니다. 그래서 JavaScript의 이터레이터에 대한 자바스크립트 구문과 유사합니다. v-..
vue.js 공식문서 따라하기 - Conditional Rendering(조건부 렌더링)
* 공식문서 vuejs.org/v2/guide/conditional.html 를 공부하며 작성한 글입니다. v-if v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용됩니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. v-else와 함께 “else 블록”을 추가하는 것도 가능합니다. Vue is awesome! Oh no 😢 v-else-if v-else-if는 이름에서 알 수 있듯, v-if에 대한 “else if 블록” 역할을 합니다. 또한 여러 개를 사용할 수 있습니다. A B C Not A/B/C v-if 조건부 그룹 만들기 v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야합니다. 하지만 하나 이상의 엘리먼트를 트랜지션하려면 어떻게 해야할까요? 이 경우 우리..
vue.js 공식문서 따라하기 - computed와 watch
* 공식문서 kr.vuejs.org/v2/guide/computed.html 를 공부하며 작성한 글입니다. computed 속성(Properties) 템플릿 내에 표현식을 넣으면 편리합니다. 하지만 간단한 연산일 때만 이용하는 것이 좋습니다. 너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다. {{ message.split('').reverse().join('') }} 이 템플릿은 더 이상 간단하고 명료하지 않습니다. message를 역순으로 표시한다는 것을 알려면 찬찬히 살펴봐야 하겠죠. 템플릿에 메시지를 역순으로 표시할 일이 더 있으면 문제는 더 악화될 것입니다. data1 : {{ message.split('').reverse().join('') }} data2 : {{ ..