Vue

시작✔ 모든 Vue 앱은 createApp 함수를 사용하여 새로운 앱 인스턴스를 생성하는 것으로 시작createApp에 최상위 컴포넌트를 만들어 주고 전달해준다.모든 앱에는 다른 컴포넌트를 자식으로 포함 할 수 있는 최상위 컴포넌트가 필요 하기 때문앱 마운트

👨‍🎓 자바스크립트에서 종종 사용하는 this 최소 4가지이상의 뜻을 가지는데 이번에 정리할려고함.

👨‍🎓 데이터를 바인딩 할 땐 세가지 바인딩이 존재한다.👨‍🎓 사용 할 공용 데이터 뷰에서의 변수는 data() 안에 객체 형식으로 만들어 저장한다mse : hello = let mse = "hello"가 됨. 텍스트 바인딩텍스트 바인딩은 간단하게 이렇게 사용하

뷰에서 메소드(함수)를 사용 할려면 methods : {} 로 선언 해준 뒤 안쪽에 함수명(){액션} 이렇게 넣어주고 뷰에서 데이터를 사용할 땐 this.변수명으로 사용해야 함.

뷰에서의 클래스 바인딩은 true일때만 적용 됨일반 class와 변수를 바인딩 할 수 있는 :class로 나뉨객체 바인딩결과배열 바인딩결과

입력키 수식어키보드 이벤트를 수신할 때, 특정 키를 확인해야 하는 경우가 많기 때문에, 키 수식어를 지원합니다:KeyboardEvent.key를 통해 유효한 입력키 이름을 kebab-case로 변환하여 수식어로 사용할 수 있습니다입력키 별칭Vue는 가장 일반적으로 사용

v-model은 다양한 유형은 엘리멘트에 사용가능하며, 엘리멘트에 바인딩된 변수의 상태를 업데이트해줌

watch는 DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경하는 것)를 수행해야 하는 경우에 사용하거나 데이터가 변경되는 것을 감지할 때 사용합니다. watch에 데이터를 함수로 만들어두면 데이터가 업데이트 될 때마다 해당 함수가 실행됩니다. 예)

vue slot은 컴포넌트 안의 커스텀 할 html을 추가 하고 싶을 때 사용 컴포넌트 안에 원하는 곳에 이라고 추가하면 됨

ref로 접근하기ref 값은 this.$refs에 노출됩니다컴포넌트가 마운트된 후에만 ref에 접근할 수 있습니다.$refs.input이 템플릿 표현식에 있으면 첫 렌더링 시 null입니다. 이는 첫 렌더링이 끝날 때까지 엘리먼트가 존재하지 않기 때문입니다!

부모 컴포넌트에서 자식 컴포넌트로 데이터를 props 해줄 때 자식 컴포넌트에서 props 받은 값을 수정하고 싶을 때 사용 부모 컴포넌트자식컴포넌트만약 emit을 method에서 함수로 쓰고 싶다면

props는 상위컴포넌트에서 하위 컴포넌트로 데이터를 보낼 때 사용 props를 받는 하위 컴포넌트에서는

만약 DeepChild에서 Root(main)의 데이터를 props 받고 싶을 때,footer을 거쳐서 DeepChild에 props를 해야하지만 provide와 inject를 쓰게되면 footer을 거치지 않고 바로 props 할 수 있다.Provide📌 앱 cre

npm install vue-router@4import { createWebHistory, createRouter } from "vue-router";const routes = { path: "/경로", component: import해온 컴포넌트, }

Vuex 셋팅store.js를 만들고 다음 코드를 작성해줌createApp 부분에 써주기mutations : { 함수명(state,data) { //state는 initial state로 필수이다. //액션 }}<button @click="$store.com

각각의 컴포넌트에 똑같은 기능을 하는 함수나 데이터들을 한곳에 모아놓고 저장해놓는 방식 mixin.js을 생성mixin.jsmixin.js는 js 형태 이지만 vue의 형식을 그대로 써준 후 vue에서 import 시켜주면 그대로 병합된다 사용 vue 파일

서버 사이드 렌더링과 클라이언트 사이드 렌더링 차이점바로 어디서 화면에 보일 페이지의 내용을 그리느냐의 차이이다.클라이언트 사이드 렌더링은 페이지의 내용을 브라우저에서,서버 사이드 렌더링은 서버에서 페이지의 내용을 다 그려서 브라우저로 넘겨준다.Nuxt의 폴더 구조ht

🔍 Vue에서 ref와 DOM 연결 시점: onMounted() 안에서만 써야 할까?Vue 3 Composition API를 사용하면서 ref로 DOM 요소를 잡고,그걸 커스텀 훅(useXXX)이나 기능에 넘겨주는 경우, 이런 고민이 생깁니다:🤔 "ref로 DOM