[Vue] Day - 1

뷰 프로젝트 생성

 

프론트 서버 실행

cd vue-project
npm install
npm run dev

 

 

 

Chorme 확장 프로그램

 

 

 

 

 

 

veu.js 장점

html에서 변수, 조건문, 반복문 사용 가능

화면 변경사항에 대해 즉각 변경

화면의 각 부분을 컴포넌트 단위로 나눠서 개발

프론트와 백이 서로 다른 프로젝트로 분리되어 통신

 

단점: 최초 로딩속도가 느림, SEO  검색엔진 최적화 불편 > 단점극복을 위해 SSR 프레임워크인 Nuxt 사용

 

컴포넌트 .vue확장자가 붙은 파일

총 3 개의 영역, js html css

<script setup>

</script>

 

<template>

</template>

 

<style scoped>

</style>

{{}} mustache 

 

 

 

 

vue

<script setup> : ref 선언한 변수는 쓸 때 .value를 붙여줘야 함

<template> : .value를 붙이면 에러

 

v-modal : 양방향 바인딩

<input v-model="message"> 는 데이터 변경 가능

 

v-bind : 단방향 바인딩

v-bind( : )

<input :value="message"> 눈 데이터 변경 불가능