ucong97

See the Pen VUE3 기초 / v-model by ucong2222 (@ucong2222) on CodePen. * 더 알아보기 v-model = @input + :value 생략 전 생략 후 const inputMaxDan = Vue.computed(() => { return Math.max(dan, inputDanMax); }); const inputMaxDan = Vue.computed(() => Math.max(dan, inputDanMax) ); - 하나밖에 없으므로 {}와 return 생략 가능

See the Pen VUE3 기초 / @input by ucong2222 (@ucong2222) on CodePen. * 더 알아보기 - isNaN() - NaN (Not a Number) - 매개변수가 숫자인지 검사하는 함수 insNan(value) - value : 검사할 값 - 매개변수가 숫자가 아니면 true, 숫자이면 false 반환

See the Pen VUE3 기초 / v-for by ucong2222 (@ucong2222) on CodePen.

See the Pen VUE3 기초 / v-show, v-if by ucong2222 (@ucong2222) on CodePen. * 더 알아보기 위코드에서의 v-show 와 v-if 의 차이점을 간단하게 설명해보자면 v-show 는 생성되있는 상태로 보여줬다가 숨기는 것. v-if 는 생성했다가 제거하는 것. F12를 눌러 코드를 한번 확인해보기!

See the Pen VUE3 기초 / 클래스 바인딩 by ucong2222 (@ucong2222) on CodePen.

See the Pen VUE3 기초 / 스타일 바인딩 by ucong2222 (@ucong2222) on CodePen.

See the Pen VUE3 기초 / 속성 바인딩 응용 by ucong2222 (@ucong2222) on CodePen.

See the Pen VUE3 기초 / 속성 바인딩 by ucong2222 (@ucong2222) on CodePen. * 더 알아보기 생략 전 생략 후 const vueApp1 = Vue.createApp(VueApp); vueApp1.mount('#vue-app'); Vue.createApp(VueApp).mount('#vue-app');

See the Pen ExZYGbr by ucong2222 (@ucong2222) on CodePen. * 더 알아보기 computed - 어떤 녀석에게 의존적일때 그 녀석이 바뀔때마다 자동으로 바뀌어서 계산된다. computed 안쓴 버전 const VueApp = { setup(){ const name = "홍길동"; const age = Vue.ref(4); const isAdult = Vue.ref(age.value >= 20); setInterval(() =>{ age.value = age.value +1; isAdult.value = age.value >=20 ; },500); return { name, age, isAdult } } } 생략 전 생략 후 const isAdult = Vue.c..

See the Pen vue3 기초 / ref by ucong2222 (@ucong2222) on CodePen. * 더 알아보기 setTimeout(함수, 3000); // 3초뒤 함수 실행 setInterval(함수, 3000); // 3초마다 함수 실행 생략 전 생략 후 setTimeout(function() { alert(age); }, 3000); setTimeout(() => { alert(age); }, 3000);