vuejs21 [vue] 정리 (최종 업데이트:2021-12-21) 최솔이의 작성 요령 개념 개념 ? 명령어 $ npm ... 주석 // 플러그인, 팁 * 주제별로 언급 @ 2021-12-07 VUE CLI / VUE 파일의 구성 요소 3가지 CLI ? Command-Line Interface 를 의미한다. 터미널을 통해 프로젝트를 손쉽게 시작할 수 있도록 도와준다. $ npm install -g @vue/cli // npm 이라는 명령어를 통해 vue cli를 전역(-g)에 설치해준다 * vue cli 공식 사이트 https://cli.vuejs.org/ $ vue create hello-world // 간단하게 프로젝트를 생성 할 수 있다. 강의 내에서 간단한 프로젝트 생성은 건너 뛰고 lint ? 코드 작성의 규칙을 정함 eslint , rules 도 마찬가지 pu.. 2021. 12. 7. [vue3] 동기? 비동기? promise // function a(callback){ // setTimeout(()=>{ // console.log('A') // callback() // },1000) // } // function b(callback){ // setTimeout(()=>{ // console.log('B') // callback() // },1000) // } // function c(callback){ // setTimeout(()=>{ // console.log('C') // callback() // },1000) // } // function d(callback){ // setTimeout(()=>{ // console.log('D') // callback() // },1000) // } // a(function (){ .. 2021. 10. 21. [vue3] props, context setup 내부에서 props 와 context 사용하기 // App.vue Apple //MyBtn.vue ㅇ 2021. 10. 19. [vue3] component api 적용/미적용 예제 // 컴포넌트 api적용 XXX {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} //컴포넌트 API 적용 OO {{ count }} {{ message }} 2021. 10. 19. [vue3] composition api 컴포지션 API 기존에 배운 내용대로 코드를 짜게된다면 다른 로직이 서로 섞여있어서 읽기쉬운 코드가 아니다. 컴포지션 API를 사용하므로써 같은 로직은 한데 모아서 처리할수있게된다 {{ count }} 2021. 10. 19. 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 속성 상속 //App.vue Banana 첫번째 두번째 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. 이전 1 2 다음 반응형
