반응형 분류 전체보기137 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. v-model / form handling (vue.js) Form Handling 1. Capture user inputs {{ JSON.stringify(formValues, null, 2) }} Name 2. Inputs, Textareas {{ JSON.stringify(formValues, null, 2) }} Name Profile Summary 3. Single select dropdown control {{ JSON.stringify(formValues, null, 2) }} Country india vietnam singapore 3. Multi select control multiple옵션을 추가해주면 여러개 선택이 가능하다. ctrl, shift 키랑 같이 눌러주면 복수 선택되어진다. {{ JSON.stringify(formValues, nu.. 2023. 1. 5. 이전 1 ··· 11 12 13 14 15 16 17 ··· 35 다음 728x90 반응형
