vue는 이름에서 묻어나는 느낌대로 'View'를 강조하는 M-V-V-M 패턴의 대표적인 프레임워크다. M-V-C에 비해 M-V-V-M은 view에서 모델과의 연결고리를 모두 담당한다. Vue는 서버와 같이 사용해도 되지만(nuxt.js, firebase) 프론트 쪽만 사용하더라도 그 효과를 충분히 볼 수 있다.
단순히 html 파일에 vue cdn을 넣어주는 것만으로도 간단한 기능을 만들 수 있다. 즉, vue에서는 사용자가 인터페이스에서 입력하는 데이터를 서버와 연동시키지 않더라도 데이터를 저장시키거나 계산할 수 있다.
조금 과장하자면 vue덕분에 프론트개발자는 DOM고통에서 해방되었다. 이제 자바스크립트로 복잡하게 DOM을 컨트롤하고, input태그와 같은 form태그의 value값에 DB정보를 전달하는 고통을 맛볼 필요가 없다. 간단한 어플은 html 껍데기 파일에서 충분히 처리할 수 있다.
1 vue cdn 넣기
vue를 사용하기 위해서 <head> </head>태그 혹은 <body>태그의 윗부분에 vue cdn과 css코드를 넣자.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script> |
2 vue 인스턴스 설정
vue기능을 활용하기 위해서는 vue를 복사한 인스턴스 객체를 생성해야 한다. 가장 간단한 아래 코드를 살펴보자.
<div id="app"> <header> <h1 v-text="webdoli"></h1> </header> </div> <script> let main = new Vue({ el: "#app", data : { webdoli : "웹돌이 뷰 스터디 Chapter1" } }) </script> |
<header>태그 사이에 <h1>태그가 들어간 부분은 어느 html태그와 차이가 없지만 h1 태그에는 'v-text'가 있다. v-text는 vue에서 설정한 데이터값 중에서 텍스트를 전달하는 역할을 한다. 위에서는 new Vue()인스턴스 안의 객체속성, data의 'webdoli'를 v-text가 가져오고 있다.
html태그에서 vue에서 지정한 data값의 속성을 사용하기 위해서는 엘리먼트를 지정해줘야 한다. 여기서 엘리먼트란, vue의 data값을 어디에 사용할 것인지를 알려주는 기능을 한다. 위의 코드에서는 '#app'이란 곳(id:app)에 사용한다고 알려주고 있다.
위의 코드는 티스토리 블로그 뿐 아니라 html을 사용할 수 있는 네이버 블로그에서도 사용가능하다. cdn방식으로 DB를 사용할 수 있는 firebase, cdn으로 view쪽이 기능을 극대화할 수 있는 vue의 조합이라면 향후 기능성 블로그가 많이 탄생할 것으로 예측된다.
'코드 스터디' 카테고리의 다른 글
| git 명령어 정리 (0) | 2019.10.29 |
|---|---|
| vue활용하기 2편. [필터 사용하기] (0) | 2019.10.26 |
| 파이어베이스 (1) 웹 호스팅 만들기 (0) | 2019.10.19 |
| git계정 준비하기 (0) | 2019.10.17 |
| 구글 파이어베이스 "파이어베이스 웹호스팅" (0) | 2019.10.02 |
댓글