[vue.js 기초 공부] vue.js - 01

vue.js란

Javascript의프레임워크 입니다.

AngulerJs, ReactJs보다 유명하지는 않지만 최근 인기가 매우 주목받고 있는 자바스크립트 프레임워크 중 하나입니다.

VueJs는 발음과 비슷하게 View에 최적화시킨 프레임워크이며

MVVM패턴을 따르고 있습니다.

 

특징

VueJs의 가장 큰 특징은 컴포넌트를 이용한 개발 입니다.

하나의 템플릿을 컴포넌트 형식을 이용해 만든 후 여러 곳에서 사용 가능합니다.

컴포넌트는 다음장에 알아보도록 하겠습니다.

 

사용법

Vue인스턴스

뷰의 모든 시작은 뷰 인스턴스를 만드는것 부터 시작됩니다.

 new vue({
  // option
 })

자주 사용하는 옵션

뷰 관련 옵션 : el, template, components

데이터 관련 옵션 : data, computed, methods

 

하나씩 살펴보면

 

el

HTML의 엘레멘트 아이디나 클레스를 지정합니다.

id나 class를 지정한 태그만 vue인스턴스의 대상이 됩니다.

주의점으로는 class를 지정한 경우에도 인스턴스는 하나의 클래스만 대상이되며 나머지 클래스 엘레멘트는 대상이 되지 않습니다.

// js
new Vue({
 el:"#test"
})

// html
<div id="test"></div>

 

template

template는 사용법이 2가지 있는데,

직접 template:"<h1>Hello world</h1>"를 이용해 사용하거나,

컴포넌트를 이용하여 사용하는 방법이 있습니다.

// js
new Vue({
 el:"#test"
 template:"<p>hello world</p>"
 })
 
 // html
 <div id="test">
 </div> 

결과값으론: div태그 안에 hello world가 입력됩니다.

 

data

data는 뷰인스턴스 안의 변수를 관리합니다.

// js
new Vue({
 el:"test",
 data:{
  "stringData":"hello world",
 },
})

// html
<div id="test">{{ stringData }}</div>

사용법은 {{ }} 중괄호 안에 변수를 넣어 사용합니다.

 

compute, methods

단순히 data안에 변수를 넣어 사용해도 되지만, 좀더 유동적으로 사용하고 싶을때 

compute와 methods를 이용하면 좋습니다.

// js
new Vue({
 el:"#test",
 data:{
  stringData:"good day"
 },
 computed:{
  computedData:function(){
   return this.data.split("").reverse().join("")
  }
 },
 methods:{
  methodData:function(){
   return this.data.split("").reverse().join("")
  }
 }
})

// html
<div id="test">
{{ data }}
{{ computedData }}
{{ methodData() }}
</div>

사용방법으론 data의 변수를 사용하는 방법과 비슷합니다.

그리고, 보면 아시겠지만 methods와computed는 거의 비슷하지만,

다른점을 본다면 methods는 캐쉬가 되지만, computed는 캐쉬가 되지 않는다는 점입니다. 

 

첫번째 공부는 여기까지!