[Web]/Vue (10) 썸네일형 리스트형 [Vue] Vue 에서 Sass Scss 사용하기 https://swoo1226.tistory.com/181 Vue.js에서 Sass / Scss 사용하기 Vue-cli에서의 SCSS 모듈의 설치와 적용 VueJS에서는 vue-loader 덕분에 Single File Component 구성의 .vue 내에서 style 태그에 lang="scss" 요소만 추가하면 scss를 적용할 수 있다. # scss 관련 모듈 설치 npm.. swoo1226.tistory.com https://velog.io/@function_dh/Vue-scss-%EC%B6%94%EA%B0%80-%EB%B0%8F-%EC%A0%84%EC%97%AD-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%84%A4%EC%A0%95 [Vue] scss 추가 및 전역 스타일 설정 Vue.. [Web] Vue 게시판[테이블] 쉽게 만들기 - vue-good-table 활용하기 Vue를 활용해 게시판을 만들 경우 손 쉽게 만들 수 있는 방법을 소개한다. vue-good-table 을 활용하는 것인데, 테마 및 여러 옵션을 제공하므로 사용에 있어 매우 편리하게 되어 있다. Vue 2 버전과 Vue 3버전이 다르므로, 이점 참고해서 자신에게 맞는 버전을 적용해서 쓰길 권장한다. Vue 3 버전 https://borisflesch.github.io/vue-good-table-next/guide/#installation Getting Started | vue-good-table-next Getting Started Installation Install with npm: npm install --save vue-good-table-next 1 Import globally in app: .. [Web] Vue router-link 사용 시, 이동이 제대로 되지 않을 때 Vue router-link를 사용할 때, /directory/A /directory/B 로 지정하고, router-link를 통해 이동하고자 할 때, 제대로 이동이 되지 않는 경우가 있다. 같은 디렉토리에서 이동하고자 할 때, 이동이 원활하지 않는 경우, 다음을 추가해준다. 다음과 같이 :ket="$route.fullPath"를 지정해주면 된다. 자세한 설명이 필요하다면 아래 링크를 통해 확인하면 된다. https://hj-tilblog.tistory.com/99 Vue router view :key="$route.fullPath" Router - view의 기능을 새로 발견했다🧐 새로 알게된 기능을 기록하려고 한다. 막 엄청난 내용이 아니긴한데 그래도 기록해놓으면 오래 기억할 수 있으니깐! vue는 .. [Vue] router-link 하이퍼링크 밑줄, 클릭 색상 변경 제거 Vue router-link 사용 시, 밑줄이 생기는 문제 및 클릭 시 색상이 변경되는 문제가 있다. 해당 문제는 다음과 같이 해결이 가능하다. css 즉 코드 쪽에 아래와 같이 추가해준다. Vue 에서 router-link는 a 태크로 취급하므로, a 태그에 다음과 같이 해주면 된다. 혹 개별로 적용이 필요하다면, 따로따로 해줘야 할 것이다. a{text-decoration:none; color: white} [Vue] 스크롤 바 숨기기 #side {-ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */} #side::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/} 이중 스크롤 표시 등으로 보기에 불편할 때 다음과 같은 코드를 이용해 스크롤 기능은 유지한 채, 스크롤바를 안보이게 처리할 수 있다. [Web] Vue 화면 새로 고침 this.$router.go(); Vue 화면 새로고침 [Web] 이미지 혹은 텍스트 등에 마우스 커서 효과 넣어주기 웹 개발 시, 이미지나 텍스트 등에도 버튼과 같이 마우스 올리면 버튼처럼 보이게 하는 효과 넣어주기 style="cursor:pointer;" 다음과 같이 커서 효과를 넣어주면 된다. [Web] app.vue 실행 시, 여백 제거하기 app.vue를 통해 화면을 처음 띄울 경우 상하좌우에 8px의 여백이 있다. body{ margin: 0px} 을 넣어주면 없어진다. 이전 1 2 다음