WEB67 [Vue.js] Vue에서 Bootstrap 사용하기 Vue에서 부트스트랩 사용하기 터미널에 다음의 명령어를 실행하여 bootstrap을 설치하고 main.js에 아래 두줄의 코드를 import 합니다. 이후 모든 화면에서 bootstrap을 사용을 할 수 있게 됩니다. npm install bootstrap 폴더구조 project |--src |--main.js main.js import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js' 2022. 7. 20. [Vue.js] 재사용 컴포넌트 재사용 컴포넌트 Vue에서는 다양한 재사용 컴포넌트를 미리 만들어 놓으면 가져다 쓰는 방식으로 생산성을 높일 수 있습니다. 주의 component들은 무조건 2단어 이상으로 .vue를 만들어야 합니다. 폴더구조 project |--src |--component | |--fragments ||--PageTitle.vue |--views ||--reuse ||--PageView.vue |--main.js component 에서 vue파일 가져와서 사용하기 부모로 부터 데이터를 가져온 경우에 props에 위치합니다. title: String, 이렇게 해도 되지만 type, default값을 넣는게 좋습니다. 제목을 "고객목록"을 해야한다 가정하면 모든화면의 제목은 동일한 UI,UX를 가져야 합니다. 그러나 개.. 2022. 7. 16. [Vue.js] Lifecycle Hook 라이프 사이클(Lifecycle Hook) vue에서 생성되는 각 단계에 해당하는 특정 이벤트가 일어나는데 그 이벤트 훅마다 지정되어 있는 함수가 있다. 어느시점에 만들어지고 사용되는지 알아본다. 완벽하게 이해할 필요는 없다. 하지만 어느정도는 알고있어야한다. beforeCreate 인스턴스가 초기화 된 직후, 데이터 관찰 및 이벤트/감시자(watcher) 설정 전에 동기적으로 호출됩니다. 인스턴스가 초기화되면 props 설정을 처리한 후 data() 또는 computed 같은 다른 옵션을 처리하기 직전에 호출됩니다. created 인스턴스가 생성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 data 관찰, computed 속성, methods, watch/이벤트 콜백 등의 설정이 준비되었음을 의.. 2022. 7. 15. [Vue.js] computed, watch computed 템플릿 내에 표현식을 넣으면 편리합니다. 하지만 간단한 연산일 때만 이용하는 것이 좋습니다. 너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다. 데이터의 특정 키, 변수 값을가지고 표현을 해줘야 하는경우 새로운 함수명으로 computed에서 구현하면 됩니다. 함수로 만들었지만 data영역에 선언한 변수처럼 사용이 가능합니다. 또한 실시간으로 데이터의 변경을 감지하고 data변경시 바로 반영을 합니다. {{ title }} {{ firstName }}, {{ lastName }} {{ fullName }} 당신의 나이는? {{ age >= 20 ? '성인' : '미성년자' }} {{ isAdult }} 코드설명 더보기 서버에서 firstName, lastName,.. 2022. 7. 13. 이전 1 2 3 4 5 6 ··· 17 다음
