MLOps 개발자 양성과정/vue (4) 썸네일형 리스트형 [Day-42] vue 컴포넌트 심화 Chap.8 컴포넌트 심화 학습 1. 컴포넌트 안에 다른 컴포넌트 사용하기 1) 부모 컴포넌트와 자식 컴포넌트 - 컴포넌트에서 다른 컴포넌트를 사용하는 방법 사용할 컴포넌트를 import한 후, 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 components에 등록 2) 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기 : Props {{title}} // props에 정의된 키는 Vue 인스턴스의 데이터 값 이중괄호 사용해 문자열에 대한 데이터 바인딩 처리 //지정한 title의 값이 자식 컴포넌트의 PageTitle에 정의된 props의 title에 전달 3) 부모 컴포넌트에서 자식 컴포넌트의 이벤트 직접 발생시키기 (부모 컴포넌트에서 자식 컴포넌트의 버튼을 클릭하는 이벤트 ㆍ ref="id" 지정 .. [Day-41] vue 서버-데이터 바인딩 3. 데이터 바인딩 ㆍ class 2 class Binding ㆍ style인라인 스타일 바인딩 4. 리스트 렌더링(v- for)태그를 반복적으로 렌더링v-for="(item, index) in items"(items 배열) 제품명 가격 카테고리 배송료 {{product.product_name}} {{product.price}} {{product.category}} {{product.delivery_price}} 5. 렌더링 문법 (v-if, v-show)조건에 따.. [Day-40] vue 컴포넌트 이해하기 컴포넌트 prefetch module.exports = { chainWebpack: config => { config.plugins.delete('prefetch'); //prefetch 삭제 }} import(/* webpackPrefetch: true*/ ); 컴포넌뷰 안에다가 만들 때 View.vue 컴포넌트 구조 이해하기1. 컴포넌트view data code의 세트라고 생각하고 실행컴포넌트 안에 HTML 소스가 있고 이걸 실행하기 위해 자바스크립트 코드 데이터가 존재.재사용이 가능해 2. snippet vue.json바디 안에Generate Basic Vue Code 작성"Generate Basic Vue Code" : { "prefix": "vue-star.. [Day-39] Vue 프레임워크 프레임워크? 규약 무조건 따라야 함. https://code-lab1.tistory.com/284 https://cocoon1787.tistory.com/745 라이브러리? 필요할 떄, 원하는 기능만 가져다 써 새로운거? 내장되지 않은 거 제공할 수 없어 ex) 학원이라는 프레임워크 국가라는 프레임워크 안에서 학원 선생 Vue.js 프로젝트 투입 일주일 전 고승원 리액트랑 뷰랑 같이 있는 책 사기 컴포넌트☆ https://ding-co.tistory.com/39 [Vue.js 프로젝트 투입 일주일 전] 1장 - Vue.js는 무엇인가? 1.0 Vue.js는 무엇인가? - 사용자 인터페이스 개발을 위한 Progressive Framework - Progressive: 웹과 네이티브 앱의 이점을 모두 수용하.. 이전 1 다음
