반응형 전체 글130 Custom Event (vue.js) props로 보낸 값은 값 읽기전용 속성이다. 그렇기 때문에 해당 값은 재정의 할 수 없다. 이럴 경우는 자식 컴포넌트에서 값을 변경하고 싶다면, 이벤트를 통해서 부모에게 전달할 수 있다. $emit 자식 컴포넌트에서 값을 변화하려면 이벤트를 부모에게 전달 //DetailView.vue Modal Page close 위 로직은 자식 모달창 컴포넌트이다. 여기서 작동되야 하는 부분은 모달창을 닫는 close 버튼이다. displayShow가 부모쪽에서 boolean값을 통해 true일 경우 open되었다. 그렇다면, props로 displayShow를 받아 자식 컴포넌트에서 false로 만들어 주면 되지 않을까? 생각하지만 당연히 될 수 없다. 위에 써 놓은것과 같이 props는 읽기 속성이고 값의 변경이.. 2023. 1. 6. Components(1) 나눠져 있는 섹션들을 다른 파일로 구분해서 따로 관리를 한다. 한 화면을 만들기 위해서 각각의 화면을 분리하여 필요할 때 사용한다. 자주 사용되는 내용의 컴포넌트는 별도의 파일로 분리하고 해당 부분만 불러와서 사용할 수 있는것이 컴포넌트이다. [컴포넌트 규칙] components 이름 작성 방법 - import 시에도 컴포넌트 명 작성시 지켜야할 규칙 1. 의미가 있는 단어의 네이밍 2. 2가지의 단어가 조합된 네이밍 3. 대문자로 시작하고, 카멜케이스로 작성한다. [vue파일에서 style scope] - 해당 파일에서만 적용 가능한 style로 scope를 줌 컴포넌트로 props 넘기는 방법 정적 데이터 전송 : username이 넘겨주고자 하는 값은 name인 string 데이터이다. 데이터를 전.. 2023. 1. 6. wathcer (vue.js) watch는 단순히 데이터 변경에 반응하기 보다 일반적인 방법을 제공한다. watch는 변경이 일어났을 때 특정행위를 할 수 있도록 해준다. 언제 사용하는지? - 속성이 변경됨을 감시하고 퍼포먼스를 구현하려고 할 때 - API통신 responce에 대해 사용 (데이터를 바로바로 감시) watch(newValue, oldValue){} - 첫번째 인자: 바뀐 값 - 두 번째 인자: 바뀌기 전 값 Volume Tracker (0-20) Current Volume - {{ volume }} Increase Decrease data가 object형태 일 때 1. 기존 volume 함수를 객체형태로 바꿈 2. handle함수 생성 3. deep: true Volume Tracker (0-20) Current Vo.. 2023. 1. 5. computed properties (vue.js) computed properties vue 인스턴스 데이터를 가공할 때 computed property를 사용한다. computed: 대상으로 정한 data()속성값이 변했을 때, 이를 감지하고 자동으로 다시 연산해주고 결과 값은 캐싱(저장)한다. 값을 저장한다는 점을 기억하자. [computed 유용한 기능] 1. 캐싱 의존하는 값에 변화가 없다면 다시 계산하지 않고 이전 값을 반환한다. 의존되어 있는 computed함수를 아무리 호출하더라도 의존값이 변화가 없다면 이전에 계산되어 캐싱된 값을 반환하게 된다. {{ firstName }}{{ lastName }} computed fullname - {{ fullName }} total - {{ total }} 기존에 데이터를 머스테치를 활용해서 html.. 2023. 1. 5. 이전 1 ··· 9 10 11 12 13 14 15 ··· 33 다음 728x90 반응형