Youbiiin's Blog

Study/Vue

mouseover 시 툴팁이 생기게 작업을 하였다. - 처음 내가 작업한 구조 {{ row[col.value] }} {{ row[col.tooltip] }} 에 mouseover 시 툴팁이 나타나는 구조이다. 근데 mouseover 할 때마다 툴팁이 번쩍번쩍 거리는 것이다. 왜 그런지 잘 생각해 봤더니.. 툴팁이 나타날 때 마우스가 툴팁영역에 있어서(?) 자꾸 번쩍번쩍 거리는 것이었다. 무슨 뜻이냐면... 마우스 이벤트를 에만 줘서 그런거였다..! - 해결 {{ row[col.value] }} {{ row[col.tooltip] }} 이렇게 이벤트를 감싸주는 요소에 줬더니 tooltip에 마우스가 가 있어도 toolTipOn이 유지가 된다! 생각해보면.. 너무 당연한 것인데, 자주 실수하는 것 같아서 기..

2023. 2. 13.

Study/Vue

컴포넌트에서 props으로 넘긴 값을 배열로 받고 싶으면, prop을 배열로 받으면 된다. @Prop({default: () => []}) buttonType?: string[]; data가 buttonType: ['join' ,'change'], 이렇다고 치면, 이렇게 buttonType 배열 안에 join이 있으면 true로 반환하여 버튼이 보여지고, 없으면 -1로 false를 반환하여 버튼이 없게 된다.

2022. 6. 2.

Study/Vue

회사 프로젝트를 CDN 방식으로 하여 Vue를 사용하였는데, CDN으로 사용 시 v-if에 대한 이슈가 있었다. 페이지 처음 접속시 로딩?때문에 v-if가 제대로 동작하지 않아서 팝업이 잠깐 노출됐다가 사라지는 것이다. 해결방법 css로 modal에 display: none 상태를 default로 만들어 준 뒤 madal에 class를 bind해주었다. 근데 이렇게 했더니 transition이 안먹어서 v-bind와 v-if를 함께 사용하여서 해결해주었다! css .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; justify-content: center; align-items: center; background:..

2021. 5. 31.

Study/Vue

Vue.js를 이용하여 Todo List를 만들어 볼 예정이다. 상태관리는 Vuex를 사용하며, localStorage에 데이터를 저장해보려한다. 1. 화면설계 1) 오늘 날짜 노출 2) 리스트 총 개수와 리스트 완료여부 개수 나타남 3) 인풋 4) 인풋에 텍스트 입력 후 등록 버튼 누르면 리스트 추가 5) 최신순, 오래된 순에 따라 리스트 필터링 6) 전체삭제 버튼을 누르면 리스트 전체 삭제 7) 체크박스 클릭 시 완료된 리스트 8) 등록한 날짜 노출 9) 한개의 리스트 삭제 2. 폴더 구조 폴더 구조는 이러하다. router와, store도 사용할 예정이니 프로젝트 생성할때 옵션을 선택해주자~ 우선 layouts 폴더에 Header, Footer를 만들고 layouts/index.vue에 import..

2021. 5. 10.

Study/Vue

v-model 속성은 v-bind와 v-on의 기능을 합쳐놓은 문법입니다. input, checkbox, selectbox, textarea 와 같은 태그에서 value값을 실시간으로 전달해줍니다. {{ text }} 컴포넌트에 v-model 사용하기 VueInput.vue 컴포넌트(자식) App.vue (부모) ID : {{ inputId }}

2021. 5. 6.

Study/Vue

v-bind는 뷰 인스턴스 데이터 속성을 html 태그에 v-bind를 입력하여 간단하게 연결하여 사용할 수 있습니다. v-bind를 쓸수있는 대표적인 속성 v-bind:style //style 데이터 바인딩 v-bind:class //class 데이터 바인딩 v-bind:src //이미지 src 데이터 바인딩 v-bind:href // 링크 데이터 바인딩 v-bind:key // key 데이터 바인딩 v-bind대신 :style, :class 이런식으로 줄여쓸 수도 있습니다!

2021. 5. 6.

Study/Vue

Vue CLI는 Vue 개발환경을 설정할수있게 해주는 도구이며, CLI를 이용하여 쉽게 프로젝트를 셋팅할 수 있게 해줍니다. 1. npm 또는 yarn 이 설치되어 있어야 합니다. npm install -g @vue/cli or yarn global add @vue/cli 2. 설치 후 vue version 확인 했을때 버전이 나오면 정상적으로 설치 된것입니다. vue --version 3. 프로젝트 생성 vue create 프로젝트 이름 4. 필요한 라이브러리로 선택합니다. 5. 설치 완료 후 페이지를 확인합니다. yarn serve 하면 아래와 같이 url이 뜹니다. 클릭한 뒤 들어가 보면 vue.js 페이지가 잘 보이는것을 확인할 수 있습니다! :) issue 랄것도 없는 issue yarn ser..

2021. 5. 6.