Vue.js 한시간만에 끝내기
Created Time: July 25, 2022 1:13 AM
Last Edited Time: December 23, 2022 5:11 PM
References: https://www.youtube.com/watch?v=sqH0u8wN4Rs
Vue.js 는 웹프론트엔드 프레임워크다
컴포넌트(Component)
- 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 웹 페이지 내의 다양한 ui
SPA
- 단일 페이지 어플리케이션
- 하나의 페이지 안에서 필요한 영역 부분만 로딩되는 형태
- 빠른 페이지 변환, 적은 트래픽양
- 하나의 페이지에서 모든 js,css로딩된상태이고 컴포넌트만 전환됨
단점
- 최초 로딩시에는 느림.
vue 구현
기본적 동작방식(router등록 등등)
vue view cli로 터미널로 텍스트입력하고, 자동적으로 구성해줌
- vue cli 설치
- vue create test (프로젝트명)
- default 로 설치
- 해당 관련 기본 옵션으로 라이브러리 등등 모두 설치 기본 구현
- vue cli가 폴더 구성 등등 다해줌
- 해당 vue create 한 폴더에서 npm run sever
- npm install vue-router —save
- router로 웹페이지간에 이동방법을 정의한것, vue는 미리 그 부분 다 받아놓고, router로 정의한것으로 컴포넌트만 교체원리
- commonents/layout/Header.vue
- 부트스트렙 뷰, 사용하기, get started 로 설치
- npm installl vue bootstrap-vue bootstrap
- vue안에 모듈러 설정 추가해줘야하ㅏㅁ
- get started에 보이는 main.js에 모두 추가 설정해주기
- get started에 navarbar 복사해서 Header.vue template안에붙여넣기
- vue파일에서 template는 html 들어감. 즉, 모양 디자인 담당, script 디자인 모양에 이벤트 캐치, 서버랑 통신하기위한 js코드들이 들어가는곳
- script deflaut 안에 name으로 명칭 지정
- views 폴더 생성
- App.vue 중요함, 보여주기 페이지이먀, import Header from ‘(파일경로)’ >> 임포트후 여기서 쓸라면 지금 보여주기 페이지 에서 components 에 임포트한거 넣어둬야한
- 넣어두면 해당 보여주기 페이지에서
이런식으로 활용가능하고, 이는 해당 Header의 template이하 부분들 이 삽입됨 - header는 app.vue에서 안바뀌고
- 대신 그아래
이부분을 추가하고 이부분은 router를 통해 원하는 컴포넌트로 상황ㅇ에 따라 바꿀예정
- 넣어두면 해당 보여주기 페이지에서
- views/Home.vue
- 여기에는 Welcome text뛰우난 template 안에작성
- views/About.vue
- 여기에는 Aout vue 를 텍스트를template 안에작성
- 이제router.js
- import Vue from “vue”
- import VueRouter from “vue-router”
- import Home from “./views/Home”
- import About form “./views/About”
- Vue.use(VueRouter) //뷰 라우터 사용선언
- const router = new VueRouter({ mode routers 등록해주기 })//뷰 라우터 작성
- routers안에는 path와 component를 적어놔서, 결국 앞서 router-view를 선언해 놓은 곳에 path에 해당하는 component으로 바꿈!
- router 사영하기위해 main.js에서 설정해줘야함
- import router from ./router
- new Vue안ㅇㅔ서 router를 정의해야함. 그래야 mount(#app)을 할때 router가 사용될상태됨
뷰 라이프 사이클
- 다이어그램 참조하기 공식
- before create
- create 다양한 메서드나, 특정 데이터 감시,데이터 바인딩 해야하것 옵션들을 설정을 완료하는 부분
- before mount 컴포넌트안에 template안에 html코드들, 컴포넌트가 돔에 실행도니느것
- mounted 컴포넌트가 돔에 추가된후를 말함
- before update 컴포넌트가 돔에 추가된후 재랜더링 일어나긷전
- updated 컴포넌트가 돔에 추가된후 재랜더링 마치고나서 일어나긷 이벤트 훅
- before destroy 다른 컴포넌트로 이동할때, 기존 컴포넌트 재거 되기 직전
- destroied 기돈 컴포넌트가 제거된후 상태를 말한
중요한 문법
vue docs 참조