vue310 [vue] $nextTick 사용하기 가끔 우리가 Dom을 그려줄때나 접근할 때, Dom을 그려주고 접근하는 것이 비동기적으로 처리가 되어 귀찮아 질 때가 있습니다. 예시론, 바인드완료 위 코드와 같이 mount된 후 1. isBind에 true값을 주어 2. #spanEle Dom을 그리고 3. 그 후에 #spanEle를 console.log로 접근해 보면 위 사진과 같이 null이란 결과가 나옵니다. 이 이유는 맨 첫 문단에 작성했던 Dom을 그린 후, 다음 실행문장이 동기적으로 진행되는 것이 아닌 비동기로 진행되어 #sapnEle Dom이 그려지기 전에 console.log로 접근하기였기 때문입니다. 공식문서에서 살펴보니 이와 같은 상황에 nextTick을 사용하라 나와있네요. https://vuejs.org/guide/essentia.. 2022. 3. 16. vue3 script 구현방법 (setup) vue3 스크립트 구현방법 1.options(기존의) 2.composition 3.script setup 메모용 3.script setup은 2.실행 시 composition로 빌드해 주기 때문에 2와 3은 비슷하다 https://vuejs.org/api/sfc-script-setup.html | Vue.js vuejs.org 2022. 3. 1. [vue] v-for 안에서 값이 바뀌지 않는 버그 || v-model cannot be used on v-for or v-slot scope variables because they are not writable. v-model cannot be used on v-for or v-slot scope variables because they are not writable. 업무도중 위와 같은 에러를 만났다. 사실 위 문장을 바로 마주친건 아니였고... 회사에서 quasar라는 ui 프레임워크를 사용하는데 (quasar는 vue 기반으로 사용) https://quasar.dev/ Quasar Framework - Build high-performance VueJS user interfaces in record time Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive webs.. 2022. 2. 21. [vue] vue 프로젝트 생성 # vue/cli 5.0.8 기준임 # npm init vite 명령어를 통해 vite 빌드도구를 선택할필요가 없다. ( vue/cli에서 기본적으로 vite를 선택하도록 바뀜 ) npm init vue를 입력시 아래 옵션이 제공된다. # project name # add typeScript # add jsx support : jsx 템플릿 기법을 사용할 것인지 => jsx란 리액트와 비슷하게 자바스크립형태로 템플릿을 작성함 # add Vue Router # add Pinia => 요새는 pinia로 가는것이 정배 # add vitest => 테스트 도구임 # add ESLint => 코드 검사도구 # add prettier => 코드 스타일 맞춰주는 도구 2022. 1. 18. 이전 1 2 다음
