Web/vue
[VUE] 아코디언 만들기
아코디언 만들기전에 vue transition에 대해서 알아보자. transition 컴포넌트로 싸여진 엘리먼트가 삽입되거나 제거 될 때 일어난다. vue는 대상 엘리먼트에 css 트랜지션 또는 애니메이션이 적용되었는지 여부를 자동으로 감지한다. 그렇다면 css 트랜지션 클래스가 적정한 타이밍에 추가 / 제거된다. 트랜지션 컴포넌트가 JavaScript 훅을 제공하면 이러한 훅은 적절한 타이밍에 호출된다. css 트랜지션 / 애니메이션이 감지되지 않고 JavaScript 훅이 제공 되지 않으면 삽입 또는 제거를 위한 DOM 작업이 다음 프레임에서 즉시 실행된다. # 진입 / 진출 트랜지션에는 네가지 클래스가 적용된다. enter / enter-to / leave / leave-to ( class ) 0 ..
[VUE] 엘리먼트 간 transition
HM 프로젝트 작업중... 한 페이지에서 엘리먼트 페이지 전환 효과를 멋있게 주고 싶었다. v-if / v-else를 사용해서 엘리먼트 사이를 트랜지션 할 수 있다. v-if 이기 때문에 트랜지션 내에 엘리먼트가 한개이니까 트랜지션이 자연스럽겠지? 생각을 하고 아래와 같이 작업을 했다. 그랬더니 조건에 따라 v-if를 변경할때마다 트랜지션이 뚝뚝 끊기고 이상했다. ... ... ... 이상하다. 구글링 구글링...@@ 검색을 해보니 Vue 가이드 사이트에 아주 친절하게 이유가 있었다.(멀리 가지 말고 정식 가이드부터 확실하게 보자) 아래와 같이 트랜지션 내에 v-if로 엘리먼트 변경을 할 때는 :key 값을 같이 넣어줘야 한다. ... ... ... Vue 가이드 왈.. Vue 에서는 같은 태그 이름을 ..
[VUE] vue.js 에서 aos.js 사용하기
작업환경 : vue.js 2.6.11 + typescript + yarn 1. aos 패키지 설치 yarn add 'aos' --save-dev yarn add '@types/aos' --save-dev ❗ aos만 설치하면 에러가 뜬다. 타입스크립트 버전으로 추가 설치를 해야한다. 2. main.ts import AOS from 'aos' import 'aos/dist/aos.css' Vue.use(AOS); new Vue({ router, store, mounted () { AOS.init({ easing: 'my-easing', duration: 500, delay: 50 }); }, render: h => h(App), }).$mount('#app') ❗ AOS.init 옵션은 원하는대로 커스텀해..
[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 문법을 사용할 수 있다.
[VUE] 스타일 가이드
VUE로 프로젝트를 진행할 때 내가 꼭! 숙지하고 있어야 할 스타일 가이드를 정리해 보기로 했다. ### 필수 ### # 컴포넌트 이름은 합성어를 사용한다 root 컴포넌트인 App과 , 등 Vue에서 제공되는 빌트인 컴포넌트를 제외하고 컴포넌트의 이름은 항상 합성어를 사용한다. Vue.component('todo-item', { // ... }) export default { name: 'TodoItem', // ... } # 컴포넌트 데이터 컴포넌트의 data는 반드시 함수여야 한다. 컴포넌트(i.e. new Vue를 제외한 모든곳)의 data 프로퍼티 값은 반드시 객체(object)를 반환하는 함수여야 한다. Vue.component('some-comp', { data: function(){ ret..
[VUE] Vue CLI 작업 환경 만들기
1. node 설치 - npm은 node.js의 패키지 관리자이다. npm을 사용하려면 node.js를 설치애햐 한다. https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org * 현재버전: 지금까지 나온 버전들 중 최신 버전 * LTS: 지금까지 나온 버전들 중 많은 사람들이 사용하면서 나온 버그들을 패치하여 가장 안정적인 버전 - node 와 npm 버전 확인하기 - 숫자가 나오면 정상! node -v npm -v 2. yarn 설치 npm install -g yarn // 버전 확인 yarn --version 3. vue c..
[VUE] 스크롤 방향 체크해서 화살표 모양 바뀌게 하기
스크롤에 따라서 화살표 바뀌기 첫 화면에서 보이는 화살표이다. 스크롤을 내리면 화살표가 바뀌고 background 컬러가 생긴다. scrDown.vue 컴포넌트를 만든다. .scr-down // 기본형 .scr-down.bg-on // 하얀 배경색이 생김 .scr-down.on // 화살표 모양이 바뀜 .scr-down.hidden // hide 전체 컴포넌트를 감싸는 index.vue 에서 스크롤을 제어한다. class를 조건에 따라 바인딩한다. 스크롤이 내려갈때는 보이면 안되니까 hidden을 더해주고, 스크롤이 올라갈때는 첫화면 빼고는 스크롤 아이콘에 background가 있으니까 따로 계산할 필요없이 offset값이 200 이상일때는 bg-on과 on을 더해준다. 스크롤이 움직일 때마다 onScr..
[VUE] 스크롤 이벤트 주기
이벤트를 주고 싶은 section의 offsetTop값이 스크롤값보다 같거나 작으면 이벤트가 실행되게 해야한다. 평소에 제이쿼리로 쉽게 하던 작업인데 이걸 뷰로 풀어야 해서 어떻게 해야하나 고민했다. 컴포넌트를 평소대로 작업하고, 이들을 감싸는 index에서 스크롤 이벤트를 작업한다. 1. 컴포넌트 작업 공통 스타일은 리스트아이템으로 작업 {{listItem.ttl1}} {{listItem.ttl2}} {{listItem.txt1}} {{listItem.txt2}} {{listItem.txt3}} 2. 컴포넌트 작업 레이아웃은 같은데 스타일만 달라서 데이터로 넘기기 바뀌는 내용만 컴포넌트 index에서 데이터로 넘겨주기 watch는 Vue 인스턴스의 특정 프로퍼티가 변경될때 지정한 콜백함수가 실행되는 기..