컴공생 일상 블로그 컴공생 일상 블로그

뷰 라이프 사이클https://velog.io/@leeyw2709/Vue-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%ED%9B%85-created-mounted-%EC%B0%A8%EC%9D%B4 Vue 라이프사이클 훅 - created, mounted 차이Vue 라이프사이클 훅 - created, mountedvelog.io 실무 프로젝트에 적용하면 좋을 내용https://july1012.tistory.com/entry/Vuejs-%EC%8B%A4%EB%AC%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-%EC%A0%81%EC%9A%A9%ED%95%98%EB%A9%B4-%EC%A2%8B%EC%9D%80-%E..

각 페이지는 여러개의 컴포넌트들로 나눌 수 있음 /components 에 자식 파일 생성 - HomeView.vue Home count: {{userInfoStore.age }} 나이를 줄이자 - HomeChild.vue HomeChild {{ userInfoStore.name }} 이름 변경 - GrandChild.vue GrandChild 한살로 돌아가자 - /stores/counter.js import { ref, computed } from 'vue' import { defineStore } from 'pinia' export const useUserInfoStore = defineStore('userStore', ()=>{ const name = ref("테스트"); const age = ref..

뷰 프로젝트 생성 프론트 서버 실행 cd vue-project npm install npm run dev Chorme 확장 프로그램 veu.js 장점 html에서 변수, 조건문, 반복문 사용 가능 화면 변경사항에 대해 즉각 변경 화면의 각 부분을 컴포넌트 단위로 나눠서 개발 프론트와 백이 서로 다른 프로젝트로 분리되어 통신 단점: 최초 로딩속도가 느림, SEO 검색엔진 최적화 불편 > 단점극복을 위해 SSR 프레임워크인 Nuxt 사용 컴포넌트 .vue확장자가 붙은 파일 총 3 개의 영역, js html css {{}} mustache vue : ref 선언한 변수는 쓸 때 .value를 붙여줘야 함 : .value를 붙이면 에러 v-modal : 양방향 바인딩 는 데이터 변경 가능 v-bind : 단방향..