분류 전체보기260 vue3 ref //App.vue Hello~~~~~.vue~~ Good!!! 2021. 10. 19. vue3 provide, inject app.vue -> parent -> child 부모에서 자식으로 내릴때는 props라는 개념사용. 하지만 부모에서 손자로 내릴때는 provide, inject 사용하면 더욱 편리하다. 값을 넘길때 parent 에는 필요 없는 부분을 작성해줘야했는데 그걸 편리하게 하고자 변경! app.vue에서 provide로 데이터값을 지정하고 child.vue에서 inject 로 값을 받아줄수있다. ! 주의 할점 반응성 제공을 하지않는다. 1) 한번만 출력하게 만들거나 2)반응성을 유지하게 작성하려면 추가작업을 해야함. computed (계산된 데이터) import { computed } from 'vue'를 통해 provide 에 return computed ~.. //App.vue 클릭 App: {{ messag.. 2021. 10. 19. vue3 slot //App.vue Banana (B) //MyBtn.vue 2021. 10. 19. 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. 이전 1 ··· 5 6 7 8 9 10 11 ··· 20 다음 반응형