Vue.js (4) 썸네일형 리스트형 [Vue.js] Vue 컴포넌트 내부 요소에 css 적용 방법 (딥 셀렉터) [Vue.js] 컴포넌트 내부 요소 css 적용 방법 문제 상황 Vuetify.js 컴포넌트를 사용하고 있는 중 제공되는 컴포넌트 내부 html 요소의 css를 커스텀하고자 하였다. 일반 css 작업처럼 뷰페이지 하단 영역에 css에 시도했는데 적용되지 않았다. 예를 들어 아래 같은 경우! 컴포넌트 구조의 내부 div 같은 html 요소에 스타일을 먹혀주고 싶었다. .v-image__image { // style~ } 이런 식으로 요소의 css에 직접 style을 적용해보았는데 통하지 않았다. 해결 방안 딥 셀렉터를 css 선택자 앞에 붙여서 해결하였다. ::v-deep {선택 요소 나열} /* slide banner custom */ ::v-deep .v-carousel__controls > div >.. [Vue.js] router 관련 정리 vue-router 설치$ npm i vue-router --save-dev a vs router-linkLogin Login Card 1vue.js에서 router-view를 쓸 때 a 태그의 대용으로 router-link 태그를 선호합니다. 클릭 이벤트를 차단하여 페이지를 다시 로드하지 않도록 합니다.history 모드와 hash 모드가 동일하게 작동됩니다. (/#/ 유무) :to 를 사용하는 것은 데이터 바인딩 기능입니다. v-bind:to의 약식 표현이며 ${bid} 같은 변수를 연결한다는 의미입니다. 중첩 라우트 라우트 경로를 설정할 때 부모가 될 라우트의 속성으로 children을 넣어줍니다.그 안에 배열을 생성해서 자식 라우트를 설정합니다. [Vue.js] 서버 렌더링, 브라우저 렌더링 서버 렌더링라우팅 하는 주체가 '서버'매번 주소를 요청할 때마다 화면이 갱신된다.ex) 네이버, 구글 브라우저 렌더링 (SPA)라우팅 하는 주체가 '브라우저'주소를 요청해도 매번 갱신되지 않는다. 대신 갱신되는 부분을 서버에 요청해서 갱신한다.서버 렌더링보다 좋은 점 -> 조금 더 효율적으로 갱신.ex) 구글메일, 트렐로 참고 : 인프런 - 트렐로 개발을 통한 Vue.js, Vuex, Vue-Router 프론트엔드 실전 기술 [Vue.js] 뷰 인스턴스 라이프 사이클 정리 뷰 인스턴스 라이프 사이클 정리 [인스턴스 생성] * beforeCreate - 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계. - data, methods 속성이 아직 인스턴스에 정의되지 않고, 돔과 같은 화면 요소에도 접근 불가. * created - data, methods 속성 정의된 단계. template 속성에 정의된 돔 요소로 접근 불가. - 서버에 데이터를 요청하여 받아오는 로직을 수행할 수 있는 단계. * beforeMount - template 속성에 지정한 마크업 속성을 render()함수로 변환한 후 el속성에 지정한 화면 요소(돔)에 부착 전 호출 되는 단계. - render() 함수가 호출되기 직전의 로직을 추가하기 좋은 단계. * mounted - el속성.. 이전 1 다음
