본문 바로가기

Component3

[Vue] 페이지 새로고침 기능을 만들자! (on-off 기능 추가) bootstrap-vue 를 활용해서 새로고침 아이콘(b-icon) 으로 새로고침을 on-off 하는 기능을 만들자! 이제 간단한 조건문을 곁들인 컴포넌트 개발은 많이 헤매지 않고 할 수 있는 것 같다. 역시 백문이 불여일타 🤓 2021. 8. 30.
[Vue] b-icon 전역 컴포넌트로 등록해서 별도로 관리하기 vue + bootstrap 으로 페이지를 관리하고 있었고, 필요한 아이콘은 bootstrap 에서 제공해주는 아이콘(b-icon) 을 사용하고 있었다. 디스플레이 아이콘을 노출합니다. 그러다보니 각 컴포넌트 별로 아이콘을 사용하기 위한 위 코드가 중복으로 들어가있었고, 중복을 제거하기 위해 b-icon 을 전역 컴포넌트로 등록해서 별도로 관리하기로 결심했다. 🌝 위와 같이 전역 컴포넌트로 사용 할 Icon.vue 파일을 생성해주고, (props 로 icon 을 노출하도록 했는데 이게 최선인지는 잘 모르겠다..) // 전역 컴포넌트로 사용하려고 만든 Icon.vue import import Icon from './components/Icon' // 전역 컴포넌트로 사용하기 위해서 선언 Vue.compon.. 2021. 8. 20.
[Vue.js] vue-router 로 component 에 props data 전달하는 방법 Vue.js 를 배워보겠다고 책도 읽고 강의도 보았지만 역시 개발자는 코딩을 해봐야되나보다.. 백문이 불여일타 🙏 # 하게 된 계기 (tmi) - Vue.js 프로젝트를 진행하면서 모니터링 페이지를 만들고 있는데, 각 컴포넌트의 title 이 여러 군데에서 하드코딩 되어 있는 것을 보고.... 상수처럼 한 번만 정의해보자! 하게 됨 # 검색 1. vue-router props data 2. vue-router passing data 3. vue-router access app vue data 4. component props data ..... 등등 수많은 키워드로 검색했지만 거의 다 공식홈페이지에 있는 내용이라서 도움이 되지 못했다 😥 나는 App.vue 에서 data 로 각 컴포넌트의 title 을 .. 2021. 6. 4.