ucong97

See the Pen vue3 기초 / 할일리스트, 리스트 부분을 todo-list 컴포넌트로 분리 by ucong2222 (@ucong2222) on CodePen.

See the Pen vue3 기초 / 할일리스트, 수정할 제목을 입력안하면 focus by ucong2222 (@ucong2222) on CodePen. * 더 알아보기 onBeforeUpdate - 데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가 업데이트 되기전에 발생 위 코드에서 onBeforeUpdate 를 사용함으로써 데이터가 업데이트 되기전 객체를 싹 비워버림

See the Pen vue3 기초 / 할일리스트, 수정 by ucong2222 (@ucong2222) on CodePen.

See the Pen vue3 기초 / 할일리스트, 삭제 by ucong2222 (@ucong2222) on CodePen. * 더 알아보기 :key - 고유한 키 - v-for 쓸때 아주 유용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 VueApp = { setup() { }, mounted() { $('square-box-1').click(function() { alert("실행"); }); // 모든 화면이 렌더링된 후 호출 } }; - mounted : 컴포넌트가 DOM에 추가 된 후 호출되는 라이프 사이클 훅

See the Pen vue3 기초 / 컴포넌트, template 태그를 활용한 외부 템플릿 by ucong2222 (@ucong2222) on CodePen.

See the Pen vue3 기초 / 컴포넌트, props by ucong2222 (@ucong2222) on CodePen. * 더 알아보기 - props : 부모컴포넌트의 데이터를 자식컴포넌트로 넘겨줄때 사용하는 옵션, 매개변수 받아주는 구멍 props: { 'textBgClass' : { type : String, required : true // 필수 속성이 되게 만든다. false 쓸거면 생략 가능 } } - html 에서 text-bg-class 라 써도 알아서 textBgClass라고 받아온다.

See the Pen VUE3 기초 / 컴포넌트 정의 by ucong2222 (@ucong2222) on CodePen.

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 생략 가능