다양한 설정과 스타일을 적용한 스핀 버튼 컴포넌트 예제입니다.
이 컴포넌트는 두 종류의 값 변경 관련 이벤트를 제공합니다.
valuechange: <spin-button> 호스트가 발생시키는 즉시 커스텀 이벤트.
증가/감소 버튼 클릭, 사용자 타이핑(input), Enter, blur 정규화 등
실제 값 변화 시마다 1회 발생.
change: 내부 <input type="number">의 네이티브 확정 이벤트. 사용자가 직접
타이핑한 후 blur 혹은 Enter로 확정될 때만 발생하며, 버튼 클릭만으로는 나오지 않습니다.
권장: 실시간 반응/계산은 valuechange 하나에 연결, 폼 제출 시 최종 값만 읽거나 필요 시
change를 "사용자 직접 입력 확정" 용도로만 활용.
버튼 조작 감지하려면 반드시 valuechange 사용. 동일 로직을 두 이벤트에 모두 바인딩하면 중복
처리될 수 있습니다.
각 항목 앞의 [valuechange], [change] 태그로 이벤트 출처를 구분합니다. valuechange는
<spin-button> 호스트 즉시 이벤트, change는 내부 <input>의
네이티브 확정 이벤트입니다.