Vue.JS: 양방향 바인딩(two-way binding)

v-model: v-bind:value와 v-on:input의 축약어.

v-model은 양방향 바인딩. 데이터 바인딩과 이벤트 처리의 결합.

html내에 메소드를 넣어서 직접 실행시키는 것은 좋지 않다. 다른 행동(관계 없는 버튼 클릭 등)을 하더라도 매번 해당 메소드를 재시작하게 됨.

HTML 코드 내에 직접 메소드의 내용을 써버리면 매번 실행하지 않게 되지만, HTML 코드 내에 로직을 넣는 것은 좋지 않음.

HTML은 웹 페이지의 구조와 콘텐츠를 정의하기 위한 마크업 언어입니다. HTML은 프로그래밍 언어가 아니며 로직이나 동적 기능을 구현하기 위한 용도로 설계되지 않았습니다.

따라서 HTML 코드에 로직을 직접 삽입하는 것은 좋은 아이디어가 아닙니다. 이는 유지 보수성과 가독성을 저해하며, 코드의 복잡도와 오류 가능성을 증가시킵니다.

대신 HTML과 분리된 JavaScript를 사용하여 동적인 기능을 구현하고, CSS를 사용하여 디자인 및 레이아웃을 제어하는 것이 권장됩니다. 이렇게 하면 코드가 더욱 모듈화되며 유지 보수가 쉬워지며, 웹 페이지의 성능과 보안도 향상됩니다.

ChatGPT

-> 이를 해결하는 좋은 수단: computed

computed는 메서드와는 다르게, vue가 의존성을 인식하고 의존성 중 하나가 변경된 경우에만 재실행함.

computed에서 정의하니, method와는 다르게 더 이상 버튼클릭으로 재시작하지 않음!

vue가 연산 프로퍼티의 의존성(name)을 인식하여, 연산 프로퍼티의 값을 캐시에 저장하고 유일한 의존성인 name이 변경된 경우에만 재계산/재평가한다.

값을 출력하는 대부분의 경우에는 메서드보다 연산 프로퍼티를 사용하는 것이 좋다. 페이지의 어떤 항목이 변경되든 값을 재계산할 때만 메소드를 사용하자.

이것도 살펴보세요!

드래곤 볼 × UT 컬렉션: 소년편, 사이어인편 구매

2023년 5월 1일부터 유니클로(Uniqlo)에서 판매중인 드래곤볼 티셔츠를 두 장 구매. 아내에게도 흰색 티셔츠를 한 장 …

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다