Muscardinus

For Loop에서 여러 개의 element에 대해서 각각의 transition을 주기 위해서는 다른 방식으로 접근해야한다. 이럴 때, 사용하는 것이 transition-group이다. Toggle Add {{ number }}

transition에 name 속성과 css를 통한 방법 이외에 Javascript로 animation을 제어할 수 있다. Toggle Hey 각각의 함수는 해당 element를 알려주는 인자를 공통적으로 가지고 있다. 그리고, enter와 leave는 끝을 알려주는 두 번째 인자를 갖는다. 또한, Vue는 js 전에 css가 있으면 css를 우선시하기 때문에, js로 구현할 경우 transition 속성에 :css="false"를 넣는 것을 추천한다. JS를 통해서 animation을 구현할 때는 해당 resource를 사용한다. https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API ..

우리가 animation 효과를 주기 위해서 CSS로 처리하는 경우가 있다. 하지만, Vue에서는 animation을 transition 기법을 사용하여 처리할 수 있다. 위에서 볼 수 있듯이, Vue에서는 Transition을 enter과 leave에 대해서 각각 세 단계로 나눈다. Toggle Hello world! 코드에서 볼 수 있듯이, Transition에 name 속성에 클래스의 이름을 넣고 (transition이 얼마나 걸릴지를 duration 속성에 넣어도 된다.) style에서 from/active/to를 상황에 맞게 넣으면 된다. Toggle Hello world! Another hello! 두 개의 자식에 대해서 할 때는, 구별을 주기 위해서 key값을 넣는다. 또한, transiti..

컴포넌트를 상황에 따라서 동적으로 보이게 하고 싶을때가 있다. 이런 때, Dynamic Component를 사용한다. Home About component라는 것을 선언한다. 여기에 component를 선언한다는 것을 의미하고, :is에 컴포넌트의 이름이 나타나게 하면된다. 컴포넌트가 Unmount되면 기존에 가지고 있는 data도 날라간다. 이를 방지할려면, 이럴 경우, 컴포넌트가 unmount되지 않는다. 하지만, component가 사라지면서 어떠한 행위를 하고 싶으면 어떡할까? 그럴 경우, Home Page Vue에서는 activated와 deactivated라는 함수를 지원한다.

Component의 재사용성을 위해서 특정한 부분에 대해서 부모에서 자식으로 html을 보내고 싶을 때가 있을 수 있다. 물론 props로 보낼 수 있지만, 그럴 경우 불편함이 있다. 이러한 불편함을 해결해주는 것이 slot이다. 쉽게말해, 부모에서 자식컴포넌트로 content를 전달하고 싶을 때, slot을 사용하는 것이 유용하다. This is some help text. Submit No Form to render 자식 Component에서 slot을 넣어, content가 들어갈 부분을 표시한다. slot 태그 안에 내용을 넣으면, 비어 있는 content에 대한 대체 content가 들어간다. 하지만, slot을 여러개로 나누고 싶을 때도 있을것이다. 그럴 경우, This is some help..

Update Age The user is {{ age }} years old {{ ageDoubled }} props에 자료형과 require, default, validator 등을 넣어서 더 정확하게 props를 사용할 수 있다. 또한, validator 함수는 component의 인스턴스가 새성되기 전에 먼저 생성되기 때문에, data/computed/methods 등에 접근이 불가하다. 이것 외에도, 다양한 설정을 놓을 수 있다. https://v3.vuejs.org/guide/component-props.html#prop-validation Props | Vue.js Props This page assumes you've already read the Components Basics. Read ..

부모 컴포넌트에서 data에 대해서 어떠한 event를 행하여 data에 변화를 주면 자식 컴포넌트의 data도 바뀔 수 있다. 하지만, 역으로 하는것은 쉽지 않다. 이를 해결하기 위해서 vue에서는 emit을 제공해준다. Hey! Update Age The user is {{ age }} years old 부모에서 v-on을 사용하여 @age-change라는 event를 선언하고, 자식에서 이를 사용하고 싶다면 this.$emit(event 이름)을 하여, 호출하면 된다. emit과 함께 어떤한 값을 전달하고 싶다면.... Hey! Update Age The user is {{ age }} years old 이런 식으로, this.$emit에 event 이름과 값을 전달해주면 된다. emits라는 배열..

Hey! The user is {{ age }} years old 부모에서 자식에게 props를 주기 위해서는 바인딩을 해야한다. ex) :age="age" => age라는 이름의 props에 age값을 준다. 자식에서는 props에 해당하는 값을 배열안에 넣는다.