스가영

디렉티브

디렉티브

vue.js에서 자주 사용되는 문법

v-model

v-on

v-bind

v-for

v-if

이렇게 5종류가 있습니다.

이제 하나씩 알아보도록 하겠습니다.

사용법

v-model

form의 input,textarea,select에서 사용하는 입력형식의 바인딩입니다.

사용법

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

//html
<div id="test">
 <input type="text" v-model="stringData">
 <p>data:{{ stringData }}</p>
</div>

결과 : https://jsfiddle.net/e8opa65j/

결과값을 보면 알수있듯이, input박스 안에 입력을 하면 p태그에 자동으로 문자가 들어가는 것을 알수 있습니다.

주의점으로는

1) input태그에 value로 값을 넣어도 무시하는다는 점입니다.

2) checked와selected도 마찬가지로 무시해버립니다.

3) data에서 변수명을 초기화 하지않으면 에러가 납니다.

v-on

이벤트관련 디렉티브입니다.

사용법

// js
new Vue({
 el:"#test",
 data:{
 count:0
 },
 methods:{
  upCount:function() {
   this.count++;
  }
 }
})

// html
<div id="test">
<button v-on:click="upCount">버튼</button>
<p>현재카운트:{{ count }}</p>
</div>

결과 : https://jsfiddle.net/e8opa65j/1/

위의 결과에선 click이벤트를 이용했지만 다양한 이벤트가 많이 있습니다.

그리고 v-on은 @로 대신하여 사용가능합니다.

예제) v-on:click => @click

v-bind

?(여러가지)를 바인딩합니다.

?의 대표적인 예로 class,id,style등이 있습니다.

사용법

// js
new Vue({
 el:"test",
 data:{
  firstClass:"first-class"
 }
})

// html
<div id="test">
 <div v-bind:class="firstClass">클래스확인!!</div>
</div>

결과 : https://jsfiddle.net/e8opa65j/2/

위의 결과값에서 클래스를 보면 firstClass가 되어 있는것을 알수있습니다.

이외에도 다양한 값을 바인딩 할수 있으니 좀더 알아보면 좋습니다!

그리고 이번에도 약어로 사용이 가능합니다!

예제) v-bind:class => :class

v-for

v-for은 우리가 프로그래밍을 배웠다면 누구나 알수 있듯이 for문은 아니고 :)

foreach문이라고 보면 적절할것 같습니다.

사용법

// js
new Vue({
 el:"#test",
 data:{
  items:[{name:"a"}, {name:"b"}, {data:"c"}]
 }
})

// html
<div id="test">
 <div v-for="(item, index) in items">
  {{ index }}:{{ item.name }}, {{ item.data }}
 </div>
</div>

결과 : https://jsfiddle.net/e8opa65j/3/

위의 결과를 보고 눈치 채셨을 겁니다!

첫번째 두번째 변수는 name:a, name:b였지만,

세번째 변수는 변수는 data:c 입니다!

vueJs에서 v-for는 값이 없는 경우 error를 내지않고 무시해버린다는 점이 특이한 점이었던것 같습니다 :)

v-if

if문도 프로그래밍에서 자주 사용되는 if문 입니다 :)

사용법

// js
new Vue({
 el:"#test",
 data:{
  count:4
 }
})

// html
<div id="test">
 <input type="text" v-model="count">
 <div v-if="count>4">4보다 큰수 입니다^^</div>
 <div v-else-if="count==4">4입니다 :)</div>
 <div v-else>4 보다 작습니다:(</div>
</div>

결과 : https://jsfiddle.net/e8opa65j/4/

결과값을 보면 알수 있듯이, input에 값을 넣음으로써 유동적으로 값이 변하는 것을 알수 있습니다!

vue의 if문을 사용하면 귀찮은 처리도 손쉽게 할수 있는게 큰 장점인것 같습니다.^^

이번 공부는 여기까지!!

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는 캐쉬가 되지 않는다는 점입니다. 

첫번째 공부는 여기까지!