분류 전체보기57 Vue(version 3) 주요 기능 정리(v-bind) #9 주요 기능 정리 #8에서는 v-on을 사용했을 경우에 대해서 알아봤다. 이번 주제는 v-bind 사용하는 법을 소개해보고자 한다. v-bind 는 v-bind:{속성} 이렇게 사용하며, 축약식으로 :{속성} 으로 사용한다. import CustomComponent from './Sample.vue' const testId = ref('test') const testClass = ref({ active: true, depth1: false }) /// './Sample.vue' 파일 {{ title }} interface Properties { useButton: boolean title: string } const props = withDefaults(defineProps(), { useButton: f.. 2024. 3. 10. Vue(version 3) 주요 기능 정리(v-on) #8 주요 기능 정리 #7에서는 v-on을 사용했을 경우에 대해서 알아봤다. 이번 주제는 v-on에서 custom 컴포넌트에서 사용하는 법을 소개해보고자 한다. import CustomComponent from './Sample.vue' const doThat = () => { // 자식 이벤트 } const doThat2 = (text: string) => { // 자식 이벤트 } /// './Sample.vue' 파일 const doChildThat = () => { emit('on-custom-event') } const doChildThat2 = () => { emit('on-custom-event2', '테스트') } const emit = defineEmits() 하단의 부터는 다른 파일이라고 생각.. 2024. 3. 1. Vue(version 3) 주요 기능 정리(v-on) #7 주요 기능 정리 #6에서는 select 컴포넌트 일 때 v-model을 사용했을 경우에 대해서 알아봤다. 이번 주제는 v-on에 대해서 알아보고자 한다. v-on은 이벤트를 받을 때 사용한다. 유저가 클릭했을 때, 어떤 값을 입력했을 때, 마우스를 이동했을 때 등등 여러 이벤트에서 사용한다. 기본 이벤트는 아래와 같다. v-on은 @로 축약해서 사용한다. click 이벤트는 위와 같이 stop prevent와 사용하는데, 이 이벤트는 자바 스크립트의 event.stopPropagation(); event.preventDefault(); 와 같은 기능이다. stop prevent에 대해서 간단히 설명하자면 Html의 구조상 부모와 자식의 관계로 사용하고 있는데, 부모 Element에 이벤트를 전달하지 않는.. 2024. 2. 12. [광화문 맛집] 디타워 맛집 야마야 모츠나베, 일본보다 맛있다! 찬바람 부는 추운 겨울밤에는 유독 따뜻한 국물이 생각나는데요. 친구들과 광화문 디타워 맛집으로 유명한 야마야 디타워점에 다녀왔습니다. 야마야 디타워점 찾아가는 길 디타워 4층 에스컬레이터 앞 영업시간 11:00~21:30 (주말 21:00까지) 브레이크타임 15:00~17:00 일본식 곱창전골, 모츠나베로 유명한 야마야 디타워점입니다. 이미 광화문 맛집으로 알려져있더군요! 내부가 아주 넓고 쾌적합니다. 평일 저녁 6시에 가서 그런지 사람이 많지 않았어요. 야마야 디타워점은 자리에서 태블릿으로 주문합니다 야마야 모츠나베 1인분 18,900원 가격이 제법 있는 편입니다. 간장/된장/매운맛 중 국물을 선택할 수 있는데요! 저는 아고다시 간장으로 선택했습니다. 간장맛이 가장 일본스러울 것 같아서 골랐네요. 저는.. 2024. 2. 7. 이전 1 2 3 4 ··· 15 다음 반응형
