도슐랭스타

ref()와 일반 변수의 차이ref()란반응형 데이터를 만들기 위한 래퍼 함수다. ref()로 감싼 값은 Vue가 변경을 감지해서 화면을 자동으로 업데이트한다.const message = ref("안녕하세요 Vue!"); // 반응형const nomalMessage = "일반 메시지 입니다."; // 일반 변수+ 단순 값을 Vue가 추적할 수 있는 객체로 포장해주는 역할이라 래퍼(wrapper, 포장지) 함수라고 부름.내부에서 값을 바꿀 때 차이setTimeout(() => { nomalMessage = "3초 후 변경"; // 값은 바뀌지만 화면 안 바뀜 message.value = "3초 후 변경"; // 화면 자동 업데이트}, 3000);ref()로 감싸지 않으면 값이 바뀌어도 Vue..

Vue에서 "조작하기 어렵다"는 말의 의미일반 변수 vs 반응형 데이터let nomalMessage = "일반 메시지 입니다.";var vm = createApp({ data() { return { nomalMessage: nomalMessage, // 값만 복사해서 반응형으로 등록 }; }, created() { // this는 Vue 인스턴스 this.nomalMessage = "일반 메시지 입니다."; },}).mount("#app");data()가 실행되는 순간 nomalMessage의 값만 복사해서 가져온다.이후 this.nomalMessage는 바깥의 let nomalMessage와 완전히 별개가 된다.let nomalMessage → "일반 ..

v-model이란폼 입력 요소와 Vue 데이터를 양방향으로 바인딩해주는 디렉티브다.내부적으로는 이렇게 동작한다.즉, 이벤트 핸들러 함수를 따로 만들 필요가 없다.여러 input이 있을 때각 input은 자기 데이터에만 연결되어 있다. num1 input에서 이벤트가 발생하면 num1만 바뀌고 num2는 그대로다. 이벤트 핸들러를 따로 만들 필요 없다.v-model 수식어.lazy기본 v-model은 input 이벤트(타이핑할 때마다)로 데이터를 업데이트한다. .lazy를 붙이면 change 이벤트(포커스를 잃었을 때)에만 업데이트한다..number입력값을 숫자로 형변환한다. 형변환이 불가능하면 원래 값을 유지한다..trim입력값의 앞뒤 공백을 제거한다. 단어 사이 공백은 제거하지 않는다." 홍 길 동 ..