[Vue.js] 1. 디렉티브 (v-bind,v-on,v-if,v-for) 에 대한 이해와 예제

해당 자료는 Vue 공식 홈페이지의 문서를 대부분 이용하고 있고 더 많은 정보를 참고하시려면 Vue 공식 홈페이지를 이용해주십시오 -> 바로가기 Vue 공식 홈페이지-배우기

Vue. JS 란? 

사용자 인터페이스를 만들기 위한 Progreeprogressive 프레임 워크입니다.

*사용자 인터페이스: 서로 다른 시스템끼리 상호작용하기 위해 사용하는 장치나 소프트웨어 

*프레임 워크: 애플리케이션을 개발 할때 바탕이 되는 틀 또는 템플릿

 

 

https://jsfiddle.net/qudcks0703/y1zef7or/

 

* 프로그램을 깔기 귀찮거나 연습해보고 싶으실 때 이 웹사이트를 적극 추천합니다.

* Vue를 배우기 위해선 기본적으로 html,css,javascript의 기초를 숙달한 상태이셔야 합니다.

 

위의 페이지에 접속하시면 아래와 같은 코드가 보이실 겁니다.

 

 

데이터 바인딩

1. 템플릿 문법을 이용한 바인딩

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: '안녕'
  }
})

위의 코드 처럼 HTML <div> 태그 내에 직접 값을 입력하지 않더라도 값을 바인딩 시킬 수 있습니다.

 

*바인딩= 어떤 속성과 이름을 연결하는 것을 말함.

*el= HTML 접근자 ex) #app -> id="app"  .app -> class="app"  app  -> name="app" 

*data= Vue 객체 내에서 사용할 속성들을 만든다. 모든 속성들은 JSON 방식처럼 입력해야한다 

ex) data : { a: 3, } ( O )     data={ a=3; } ( X )  -> 이거 자주 헷갈림..

* {{}} = <div> 내에 {{ message }} 템플릿 문법으로 data내에 속성 값을 바인딩 시킴

 

 

2. v-bind을 통한 바인딩

<div id="app">
  <input type="text" :value="message">
</div>
<div id="app">
  <input type="text" v-bind:value="message">
</div>

https://jsfiddle.net/qudcks0703/y1zef7or/6/

이처럼 위의 템블릿 문법을 사용한 것과 동일한 효과를 보실 수 있습니다. 

v-bind는 디렉티브로서, data나 어떤 값과 바인딩 시킴.

ex) v-bind:  = 바인드시키겠다. value = input의 기본 속성   

즉) input의 value라는 속성에 message라는 데이터를 바인딩 시키겠다 라고 생각하시면 됩니다.

이처럼 v-bind와 같이, 최신 상태를 항상 유지시켜주는 속성을 디렉티브 속성이라고 합니다.

 

*v-bind: 를 축약으로 :라고 작성 할 수 있습니다. 

 

 

 

조건문과 반복문

<div id="app">
  
  <p v-if="check">
    <span>{{message}}</span>
  </p>
 <button type="button" v-on:click="click">
   클릭
 </button>
</div>

new Vue({
  el: '#app',
  data: {
    message: '안녕 이제 보이지?',
    check:false,
  },
  methods:{
  	click(){
    	this.check=true;
    },
  }
  
})

https://jsfiddle.net/qudcks0703/y1zef7or/19/

v-if는 디렉티브로서, true일때만 실행하는 일반 조건문과 동일하다.

위는 check라는 데이터에 false를 저장해둔 뒤 v-if는 true가 아니기 때문에 <p> 태그 내에 있는 message는 보이지 않는다. 하지만 클릭이라는 버튼을 실행하면 click 메서드가 실행되면서 check값을 true로 반환하고message의 데이터가 보이 된다. 여기서 눈에 띌 점은 바인딩이 실시간으로 이루어진다는 점이다.이처럼 vue의 속성들은 최신 상태를 유지 할 수 있는 방법을들 제공한다.

 

*methods = 앞으로 배울 거지만, 메서드를 만들고자 할때 사용한다.

위의 click()은 click=function(){}의 줄임말이기도 하다.

*v-on은 디렉티브 로서, 메소드내에 이벤트와 바인딩 시킬때 사용한다. 줄임말 @로 사용할 수 있다.

ex) v-on:click="click"  == @click="click"  == v-on:click="click()"  == @click="click()"

*this= new Vue를 생성 할때 반환받는 값이 없으므로 vue를 지정해줄 수 없다. 이처럼 Vue를 지정하고 싶을땐  this를 적으세요

 

 

<div id="app">
  
  <p v-for="(i,index) in my">
   my= {{i.message}} <br/>
   you= {{ you[index].message }}
  </p>

</div>

new Vue({
  el: '#app',
  data: {
    my:[
    	{ message:'안녕'},
      { message:'내 이름은 뚝딱이 너는?'},
    ],
    you:[
    	{message:'반가워!'},
      {message:'내 이름은 뷰야'},
    ],
  },
})

https://jsfiddle.net/qudcks0703/y1zef7or/28/

v-for은 디렉티브로서 배열의 데이터를 바인딩하여 값을 표시해준다.

위에 v-for="i in my"에서 my의 값을 i라는 변수에 바인딩 시키고 i는 my가 가지고 있는 속성을 사용할 수 있습니다.그럼foreach 문과 같이 배열의 0번째부터 length-1까지 바인딩 됩니다.

 

*v-for="what" what에는 임의의변수 in 배열속성을 작성합니다.  index가 필요하다면 (임의의변수, 임의의인덱스변수)를 선언하면됩니다.

 

 

사용자 입력 핸들링

<div id="app">
 <p>{{ message }}</p>
  <button v-on:click="convert1">변환 1
  <button @click="convert2">변환 2</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: '안녕',
  },
  methods: {
    convert1: function () {
      this.message='hi'
    },
    convert2(){
    	this.message='Hello'
    },
  }
})

https://jsfiddle.net/qudcks0703/y1zef7or/32

위처럼 v-on을 축약 할 수도 있으며, methods 내에 함수 또한 축약할 수 있다. 편한 방법으로 사용하시길..

 

 

마지막으로 많은 분들이 헷갈릴 수 있는 데이터 작성에 있어서 {} [] 에 대해 말씀드리겠습니다.

//1번째
new Vue({
  el: '#app',
  data: {
    a:{message:3},
  }
})

//2번째
new Vue({
  el: '#app',
  data: {
    a:[{message:3}],
  }
})

위처럼 1번째 값을 호출하고자 할땐 this.a.message(또는 this.a[message])를 작성하시면 3이 표기 됩니다.

위처럼 2번째 값을 호출하고자 할땐 this.a[0].message(또는 this.a[0][message]를 작성하시면 3이 표기 됩니다. {}는 .이나 속성명]을 통해접근하며, []는 배열이기때문에 0~length-1 인덱스를 통해 접근합니다.