Vue의 양방향 바인딩 (v-model) 간단 정리 | 수식어

양방향 바인딩v-model입력 양식을 처리할 때 입력 요소의 상태와 자바스크립트의 상태를 동기화 해야하는 경우,value를 바인딩하고 @input 이벤트로 text를 변경하는 것 같은 양방향 바인딩을 해준다. text = event.target.value" />  요소에 따라 다르게 동작하는 v-model v-model은 내부적으로 어떤 html 요소냐에 따라 다른 속성(:value)과 이벤트(@input)을 사용한다. (1) input type="text", textarea일 경우value 속성과 input 이벤트 역할을 한다. (2) checkbox, radio일 경우checked 속성과 change 이벤트 역할을 한다.또한 checkbox일 경우 boolean이 아닌 다른 값('Y', 'N')을 바..

• format_list_bulleted Vue
• · 2024. 4. 26.
• textsms

Vue에서의 이벤트 처리 | 다양한 이벤트 수식어

이벤트 처리이벤트 처리는 v-on 디렉티브를 사용단축 표현으로 @ 으로 사용메서드의 첫번째 매개변수는 event 객체  🎉 $event 인라인 핸들링에서 event 객체를 접근하려면 $event 키워드 활용한다.  🎉 이벤트 수식어이벤트를 조작할 때 v-on의 이벤트 수식어로 더 효율적으로 이벤트 메서드 호출(1) .stop 는 event.stopPropagation() → 이벤트 전파(캡쳐~버블링) 막기(2) .pervent 는 event.preventDefault() → 기본 기능 막기(3) .capture 는 캡처 모드를 사용할 때 이벤트 리스너를 사용 가능(4) .self 는 오로지 자기 자신만 호출할 수 있음. 즉 타깃 요소가 self일때 발동된다.(5) .once 는 해당 이벤트는 한 번만..

• format_list_bulleted Vue
• · 2024. 4. 25.
• textsms

Vue의 computed와 methods와 비교 | computed의 getter & setter 세팅

Coumpted 기초템플릿 표현식 내의 코드가 길어질 경우 가독성이 떨어지니 computed (계산된 속성)을 사용한다. 🎈computed vs methodsmethod를 사용하면 computed와 동일한 효과를 얻을 수 있다.하지만 computed는 결과가 캐시되고, method는 매번 실행된다.computed는 내부 반응형 데이터가 변경될 경우 다시 계산하기 때문에 computed가 더 효율적이다.다만, method는 파라미터를 활용할 수 있다. 🎈Writable computed기본적으로 computed는 getter 전용이다.하지만 필요한 경우 getter와 setter 모두 제공하여 속성을 만들 수 있다. const fullName = computed({ get() { return fi..

• format_list_bulleted Vue
• · 2024. 4. 24.
• textsms

Vue의 조건부 렌더링(v-if, v-show) 비교 | v-for과의 병행 사용?

조건부 렌더링🎈v-if 와 v-showv-if는 false일때는 렌더링되지않고 true일때만 렌더링된다.v-show는 조건에 관계 없이 항상 렌더링 된다. (false 일 경우 css display:none 속성으로 전환) v-if는 전환 비용이 높다.v-show는 초기 렌더링 비용이 높다. 즉, 무언가를 자주 전환해야한다면 v-show를 사용하고,런타임 조건이 변경되지 않는다면 v-if가 낫다. 🎈v-if 와 v-forv-if와 v-for은 함께 쓰는 것을 권장하지 않는다.동일하게 사용할 경우 v-if가 더 높은 우선순위를 갖는다.

• format_list_bulleted Vue
• · 2024. 4. 24.
• textsms

Vue3의 반응형 데이터(Reactivity) | 반응형 데이터의 구조분해와 변경방지

반응형 기초💥 반응형 상태 선언하기1. reactive()자바스크립트 객체에서 반응형 상태를 생성하려면 reactive() 함수를 사용한다. import { reactive } from 'vue'const tay = reactive({ level: 0 })객체, 배열 같은 레퍼런스 타입도 반응형 객체로 만들 수 있다.const tay = reactive({level:0, dev: { count: 0, } })    이러한 reactive()는 뎁스가 깊어도 잘 동작한다.즉, 위 코드에서 reactive로 tay.dev.count에도 반응한다.참고로 Options API의 data에서 객체를 반환할 때, 내부적으로 reactive()에 의해 만들어진다.  2. ref()number, string, boo..

• format_list_bulleted Vue
• · 2024. 4. 23.
• textsms