반응형 Framework43 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. Vue Router - Route, Router 차이 $router - Router인스턴스 - 전체에서 딱 하나만 존재함 - 전반적인 라우터 기능을 한다. - router-link요소 없이 페이지 이동 property, method 설명 app 라우터를 사용하는 router vue인스턴스 mode 라우터모드 currentRoute 현재 라우트에 대한 Route 객체 push(location) 페이지 이동 실행 (히스토리 새 엔트리에 추가됨) replace(location) 페이지 이동 실행(히스토리에 쌓이지 않음) go(n) 히스토리에서 n단계 이동 back() 히스토리에서 한 단계 돌아감 forward() 히스토리에서 한 단계 앞으로감 addRoute(routes) 라우터에서 동적으로 라우트 추가 $ Route - Route객체는 현재 활성화 된 라우트의.. 2023. 1. 5. 이전 1 2 3 4 5 6 7 ··· 11 다음 728x90 반응형
