프론트엔드/vue

✅ Mixin mixin을 사용하면 mixin의 모든 옵션이 → mixin을 사용하는 컴포넌트에 혼합됨 (mixin의 script에서 사용되는 모든 옵션 다 혼합됨! import, created...등등) mixin과 사용하는 컴포넌트에 중첩되는 옵션이 있으면 : 컴포넌트의 옵션이 우선하여 적용된다. mixin에 정의된 함수(Hooks)가 컴포넌트에 정의된 함수보다 먼저 호출된다. // MyMixin.js export default { created() { console.log("My mixin"); }, }; // Component.vue // 결과 : My mixin , component1 ✅ 전역 Mixin - mixin을 전역으로 사용할 수 있다. - 전역 mixin은 사용자 지정 옵션 처리에만!..

✅ 문제 center값이 바뀌면 자식 컴포넌트에서 이벤트 버스를 받아 로직을 처리해야 하는데 자식 컴포넌트에서 이벤트 버스가 받아지지 않았다. - Parent.vue watch{ center(){ this.$bus.$emit("eventBus") } } - Childrun.vue created: async function() { ... await this.method(); this.$bus.$on("eventBus", this.someMethod); ... }, ✅ 이유 : vue에서 이벤트 버스를 할 때 이벤트 바인딩을 늦게하기 때문에! await는 프로미스가 resolve 될 때 까진 그 뒤의 로직은 실행되지 않고 대기중이다. 때문에 Childrun 컴포넌트가 create 될 때 await 뒤에 ev..

✅ data함수가 일반 function 일 때 vue에서 data함수를 정의할 때 this가 vue 인스턴스 객체를 가리키는게 중요함. 일반적인 function함수를 사용하면 this는 new Vue()에서 new 키워드로 생성한 인스턴스 객체인 "vue인스턴스 객체"를 가리키게 됨. data() { console.log("this", this); // VueComponent return { list: [{},{}] } }; ✅ data함수가 arrow function 일 때 THIS arrow함수 사용하면 this는 상위 스코프의 this를 가리키게 됨. 따라서 vue인스턴스 객체가 있는 상위 스코프(전역 객체)를 가리키게 되어 undefined가 나오는 것임. data: () => { console...

v-model은 input, select, textarea에서 사용할 수 있다. input 이벤트: input type="text", textarea change 이벤트 : input type="checkbox", input type="radio", select default modifiers v.model.lazy- input 요소에서 포커스가 빠지면 data가 업데이트 된다. v.model.number - input에 입력된 값을 숫자형으로 바꿔준다. v.model.trim - js의 string의 trim 메서드와 같다. 입력값 앞뒤 공백을 제거해준다. checkbox에서의 true-value, false-value checkbox의 v-model로 바인딩한 data가 Boolean 형태이기 떄문..

prop을 자식 컴포넌트에 넘겨주는 것 처럼, 어떤 틀에 "template 자체"를 넘겨서 자식 컴포넌트에서 렌더할 수 있음. HTML 삽입 미리보기할 수 없는 소스

1. v-for문 안에서 v-if를 쓰지 않는다. 이유 : v-for문이 실행 된 후 v-if문이 실행되기 때문에, if문 조건에 따라 분기처리 되는게 아니라 for문을 도는 모든 요소을 다 거치게 된다. 해결 : computed에서 for문을 돌릴 배열을 만들어 그 값을 v-for로 사용한다. → 로직과 마크업 코드를 분리하여 가독성 증가 → 리렌더링 될 때마다 매번 for문이 실행되는게 아니라, computed 값이 바뀌었을 때만 다시 실행될 것이다. computed: { cheapProducts: () => { return this.products.filter(function (product) { return product.price < 100 }) } } 2. created나 watch에서 met..

data는 computed를 계산하기 전에 평가된다. 때문에 data의 값을 computed값으로 대입할 수 없는 것이다. 해결 : 굳이 이런 로직을 써야한다면, watch로 computed값이 바뀌었을때 data를 초기화해주는 방법을 활용할 수 있다. ※ data값으로 store값을 사용할 수는 있다. 참고자료 https://stackoverflow.com/questions/44318343/use-computed-property-in-data-in-vuejs

slot 슬롯은 어떤 콘텐츠를 다른 컴포넌트에 전달할 수 있게 됨. 활용 사례 : 캐러셀을 만들때 부모 컴포넌트1과 2는 공통된 자식컴포넌트를 사용함. 그러나 그 자식 컴포넌트의 레이아웃은 같지만 컨텐츠 내용만 바꿔 사용할 때 slot 활용할 수 있음. 리액트에서의 outlet과 비슷하다고 생각됨. 공식문서 : 영문 사이트 한글 사이트 ✅ 기본사용 - 특정 컨텐츠를 전달 (단일 슬롯 사용) Parent1과 Paren2는 Child컴포넌트를 공통으로 사용한다. 그러나 컨텐트 내용은 어떤 부모 컴포넌트 인지에 따라 다르게 나타내야 하는 상황. Parent에서 아무 컨텐츠도 쓰지 않았다면, 기본 값으로 slot에 정의해둔 컨텐츠인 "default" 가 나온다. // Parent1.vue - "/home" ho..

a태그와 router-link는 라우터 주소를 이동시킬 때 사용한다. 이 둘은 비슷하지만 다음과 같은 차이점이 있기 때문에, vue에선 a태그보단 router-link 사용을 선호한다. a태그 : 페이지 전체가 다시 실행되게 됨. (spa 구현x) router-link : 브라우저의 "새로고침 없이"도 다른 페이지로 이동시켜주는 컴포넌트임! (spa 구현ㅇ) 공식문서 : https://v3.router.vuejs.org/kr/api/#router-link