사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크(궁금하면 검색해보자)
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;
}실행하면 이렇게 나올 것이다.
'Vue' 카테고리의 다른 글
| webpack 연습3: 웹팩 실행해보기 (0) | 2021.02.18 |
|---|---|
| webpack 연습2: webpack 설정하기 (0) | 2021.02.17 |
| webpack 연습1: 프로젝트 초기화 (0) | 2021.02.16 |