Vue

Vue란?

CodeMania 2021. 1. 26. 23:57

사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크(궁금하면 검색해보자)
SPA(Single Page Application)를 굉장히 쉽게 구현할 수 있음

SPA: 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹어플리케이션이나 웹사이트

하지만 SPA를 쉽게 구현하려는 수준까지 가려면 공부를 많이 해야 한다.

그러면 다같이 공부해보자~~~

 

index.html

<!DOCTYPE html>
<html lange="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product App</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="nav-bar"></div>
    <div id="app">
        <h1>{{product}}</h1>
        <p>{{description}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!--cdn을 통해 Vue 가져오기-->
    <script src="main.js" charset="utf-8"></script>
</body>
</html>

Vue는 cdn을 통해 이용가능하다(나중에 프로젝트가 복잡해지면 'vue cli'라는 것을 이용해서 프로젝트를 구축하게 된다)

 

main.js

const app = new Vue({
	el: "#app",
	data: {
		product: "양말",
		description: "따뜻한 양말이에여~~ 디자인도 예뻐요~~",
	},
});

Vue는 Vue 인스턴스를 만드는 것에서 시작한다.

Vue의 생성자는 options라는 객체를 매개변수로 받는다.

options에는 여러 속성들이 들어갈 수 있다. 일단 그 중에서 가장 기초적이고 쉬운 것을 알아보겠다.

el은 특정태그와 연결하는 역할을 한다. el:"#app"; 이므로 id가 app인 div 태그에 영향을 끼칠 수 있게 된다.

data에서는 사용할 변수들을 선언하면 된다. 지금은 product와 description을 선언했다.

이 변수들을 사용하기 위해서는 html파일에서 {{ }}안에 변수명을 쓰면 된다.

 

style.css

body {
    font-family: tahoma;
    color:#282828;
    margin: 0px;
}

#app {
    margin: 5px;
}

실행하면 이렇게 나올 것이다.

실행결과