Frontend/Vue 231 vue3 component emit //App.vue Banana //MyBtn.vue ABC button 2021. 10. 19. vue3 component 속성 상속 //App.vue Banana 첫번째 두번째 2021. 10. 19. vue3 Componunts Apple Bananaa Melon Strawberry Cherry 2021. 10. 19. vue3 v-model / @input / @change / v-model.lazy / v-model.number / v-model.trim v-model 한글 입력시에는 방법이 다름 {{ msg }} {{ checked }} @input / @change / v-model.lazy / v-model.number / v-model.trim {{ msg }} 2021. 10. 18. vue3 @keydown @keydown.a = a키 누르면 반응 @keydown.ctrl.a = 컨트롤+a키 누르면 반응 @keydown.enter = 엔터키 누르면 반응 2021. 10. 18. vue3 이벤트 수식어 stop prevent capture self once passive prevent / once / prevent.once NAVER @click.stop / @click.capture / @click.self @wheel.passive 2021. 10. 18. vue3 event handler Click me! 1 Click me! 2 Click me! 2021. 10. 18. vue3 v-for @고유id를 만들때 사용 npm i -D shortid shortid.generate() 추가 {{ name }} - {{ id }} //변이 methods push, pop, shift, unshift, slice, sort, reverse //비-변이 methods filter, concat, slice 2021. 10. 18. vue3 v-if / v-show click me! Hello? Hello? 2021. 10. 18. vue3 v-if / v-else-if / v-else click me! Hello!!!! Count > 3 Good~~! 2021. 10. 18. vue3 클래스, 스타일 바인딩 //클래스 바인딩 Hello World ( {{ isActive }} ) 스타일 바인딩 :style 부분에 직접 color:red 를 입력하는 방식 fontStyle 오브젝트 입력 [배열, 배열] 형식으로 입력 Hello My name is Solyi 2021. 10. 18. vue3 watch @watch }, watch: { //데이터들의 변경 사항을 감시하는 용도 //감지가 되면 내부 로직이 실행되는 구조 //데이터, function 모두 가능 msg: function(newValue){ console.log('msg: ', this.msg, newValue) }, reversedMessage(v){ console.log('reversedMEssage : ', this.reversedMessage , v) } }, 2021. 10. 18. vue3 computed - getter setter {{ reversedMessage }} {{ reversedMessage }} ADD~! 2021. 10. 18. 이전 1 2 3 다음 반응형