프로젝트로 배우는 Vue.js 3

이 포스팅에서 작성하는 내용은 프로젝트로 배우는 Vue.js 3 에서 발췌하였습니다. https://inf.run/sxQT 프로젝트로 배우는 Vue.js 3 - 인프런 | 강의 Vue.js 3 사용 방법을 배우고 프로젝트에 적용을 하면서 익힐 수 있도록 도와드립니다., - 강의 소개 | 인프런 www.inflearn.com Router Vue.js 에서 컴포넌트간 이동을 위해서는 Router 기능을 사용해야 한다. npm install vue-router@4 import { createRouter, createWebHistory } from 'vue-router'; import Page1 from '../pages/page1/index.vue'; import Page2 from '../pages/page..

이 포스팅에서 작성하는 내용은 프로젝트로 배우는 Vue.js 3 에서 발췌하였습니다. https://inf.run/sxQT 프로젝트로 배우는 Vue.js 3 - 인프런 | 강의 Vue.js 3 사용 방법을 배우고 프로젝트에 적용을 하면서 익힐 수 있도록 도와드립니다., - 강의 소개 | 인프런 www.inflearn.com Computed Computed로 변수를 정의하면, 내부에 사용된 state 변수(reactive, ref) 의 상태가 변할 때 자동으로 영향을 받음 Computed 로 정의된 변수를 재호출 시, 이전에 계산된 값을 호출하지만 아래 예제와 같은 Method를 재호출 시, 다시 해당 Method의 로직을 계산 후 호출됨 str: {{ str }} helloStrComputed: {{ h..

이 포스팅에서 작성하는 내용은 프로젝트로 배우는 Vue.js 3 에서 발췌하였습니다. https://inf.run/sxQT 프로젝트로 배우는 Vue.js 3 - 인프런 | 강의 Vue.js 3 사용 방법을 배우고 프로젝트에 적용을 하면서 익힐 수 있도록 도와드립니다., - 강의 소개 | 인프런 www.inflearn.com v-bind / v-model v-bind 단방향 데이터 바인딩 시, 사용 v-bind 키워드 생략 가능해서 사용 가능 (v-bind:value == :value) 아래 예시에서는 bindTest라는 변수의 값이 input value로 설정되도록 함 (단방향 바인딩이기 때문에 input value 가 변경되도 bindTest의 값은 변하지 않음) 아래 예시에서는 input value로..

이 포스팅에서 작성하는 내용은 프로젝트로 배우는 Vue.js 3 에서 발췌하였습니다. https://inf.run/sxQT 프로젝트로 배우는 Vue.js 3 - 인프런 | 강의 Vue.js 3 사용 방법을 배우고 프로젝트에 적용을 하면서 익힐 수 있도록 도와드립니다., - 강의 소개 | 인프런 www.inflearn.com Vue 3 프로젝트 설치 방법 1. node.js (LTS 버전) 설치 npm 설치를 위함이며, 설치가 되어있는 경우 패스 2. cmd(Windows OS) / termial(MacOS) 에 아래의 명령어 입력 npm install -g @vue/cli 3. vue cli 버전 확인 참고) 버전 4.5 이상만 vue 3 설치 가능 vue -V 4. 아래의 명령어로 vue3 프로젝트 설..