Vue 프로젝트 생성, 프로젝트 구조, 데이터 바인딩

Vue란

웹 애플리케이션을 개발할 때 사용하는 오픈 소스 자바스크립트 프레임워크이다.

 

 

 

Vue 프로젝트 만들기

1. vue cli 설치

먼저 프로젝트를 모아놓을 디렉토리를 만들고 그 위치에서 아래의 명령을 친다.

npm install -g @vue/cli

vue cli 설치하는 명령

vue cli : vue 개발환경 세팅을 도와주는 프로그램

 

 

2. 프로젝트 생성

vue.cmd create 프로젝트명

프로젝트 생성하는 명령

그다음 vue3선택하고 enter키 누르기

 

 

 

프로젝트 구조와 Vue 실행 원리

App.vue : 메인 페이지라고 생각하기

 

App.vue

html 코드는 <template></template>에다 짜고

javascipt는 <script></script>안에다 짜면 된다.

css는 <style></style>안에다 짜면 된다.

 

원리

App.vue에 있는 코드를 main.js가 index.html에 넣는다.

main.js

index.html

app이라는 id를 가진 div에 vue 코드를 넣는다.

 

 

 

웹 브라우저에 미리보기 띄우기

npm run serve

 

 

 

데이터 바인딩

 : 자바스크립트 데이터를 html에다 넣는 것이다.

 

App.vue에다가 데이터 보관함을 만들어 준다.

vue에서 이것을 'state' 라고 부른다.

App.vue

return { } 안에다 object 형식으로 데이터를 저장한다.

export default {
  name: 'App',
  data() {
    return {
      test1 : 1,
      test2 : 2,
    }
  },
  components: {
    HelloWorld
  }
}

 

<template>안에다 {{  }} 문법을 사용해서 저장한 데이터의 값을 집어넣는다.

{{ test1 }}

 

 

+ html 속성에다 데이터 바인딩하는 방법

data() {
    return {
      aaa : 'color : red',
    }
},

<div :style="aaa"></div>

속성 앞에다 : 를 붙여주고, {{ }}는 사용하지 않는다.

style이 아니더라도 img태그의 src 같은 것도 속성이기 때문에 똑같이 해줘야 한다.

 

 

 

 

출처 : https://www.youtube.com/playlist?list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- 변형 및 요약