분류 전체보기
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 : {{ ..
vue.js - vue-roller 사용 및 정리
지난 글 vue.js - 숫자 애니메이션(number animation) animated-number-vue 에서 숫자 애니메이션을 개발했었는데 animated-number-vue 는 애니메이션 효과가 적어서 다른 라이브러리를 찾는 중 vue-roller를 찾게 되어 글을 작성하게 되었다. 두 라이브러리 간단 차이점 및 vue-roller 라이브러리 설명과 테스트를 진행해보겠다. 차이점 animated-number-vue 특징 : 숫자 카운팅. 숫자가 0부터 시작하여 입력한 숫자까지 해당 영역에 카운팅되어 노출 vue-roller 특징 : 숫자 롤링. 입력은 텍스트로 byte 별 텍스트가 롤링된다. ex) 92 입력시 9 영역은 0~9까지 돌고 9 선택. 2 영역은 0~2까지 돌고 2 선택 v-rolle..