vue

[VUE] 아코디언 만들기

아코디언 만들기전에 vue transition에 대해서 알아보자. transition 컴포넌트로 싸여진 엘리먼트가 삽입되거나 제거 될 때 일어난다. vue는 대상 엘리먼트에 css 트랜지션 또는 애니메이션이 적용되었는지 여부를 자동으로 감지한다. 그렇다면 css 트랜지션 클래스가 적정한 타이밍에 추가 / 제거된다. 트랜지션 컴포넌트가 JavaScript 훅을 제공하면 이러한 훅은 적절한 타이밍에 호출된다. css 트랜지션 / 애니메이션이 감지되지 않고 JavaScript 훅이 제공 되지 않으면 삽입 또는 제거를 위한 DOM 작업이 다음 프레임에서 즉시 실행된다. # 진입 / 진출 트랜지션에는 네가지 클래스가 적용된다. enter / enter-to / leave / leave-to ( class ) 0 ..

[VUE] vue.js 라이프 사이클

VUE 와 친해지기..! 😎 Vue 인스턴스나 컴포넌트가 만들어질 때 몇 단계의 과정을 거치게 되는데, 이를 라이프사이클(life cycle)이라 한다. 즉 Vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기까지의 단계를 말한다. Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거친다. Vue는 각각의 단계에서 훅(Hook)을 할 수 있도록 API를 제공한다. beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 가 있다. 자세히 😏😎😉 알아보자 beforeCreate - Vue 인스턴스..

[VUE] vue cdn, ie11에서 사용하기

IE에서 vue cdn을 사용해 vue를 쓰고 싶으면 따로 스크립트를 넣어줘야 한다. ES6와 같은 javaScript 문법이 IE에서 호환되지 않기 때문이다. 위와 같이 스크립트를 로딩해주고 type을 지정해주면 ES6 문법을 사용할 수 있다.