반응형 Framework/vue_Foundation13 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. Event handling(vue) methods add method = {{ add(2, 3, 4) }} add method = {{ add(10, 4, 6) }} multiply method = {{ multiply(baseValue) }} EVENT {{ name }} nameChange {{ count }} increase decrease 다중 이벤트 처리 - 한개의 이벤트는 함수형태로 적지 않아도 되지만 다중 이벤트의 경우는 함수형태로 적어줘야 한다. Test Toggle {{ name }} nameChange {{ count }} increase 1 increase 5 decrease 1 decrease 5 2023. 1. 5. v-for Directive 1. Array of strings {{ index }}, {{ name }} = 0, 가 1, 나 2, 다 2. Array of object {{ name.firstName }}, {{ name.lastname }} //화면 결과 원영, 강 봉구, 이 수연, 최 3. Array of arrays {{ actor.name }} {{ movie }} //화면 결과 actor: 송혜교 그세사 태양의후예 actor: 송중기 부자집막내아들 빈센조 5. Block of HTML elements value속성만: {{ value }} //화면 결과 value속성만: lili value속성만: 32 value속성만: developer 6. Object key value pairs value:{{ value }} ke.. 2023. 1. 5. 이전 1 2 3 4 다음 728x90 반응형
