2. vue.js 데이터 바인딩

안녕하세요~!!

오늘은 vue 데이터 바인딩하는 방법에 대해 알아보겠습니다!!

+ 인자 , 파라미터(매개변수) 사용방법도 함께

알아보겠습니다!

 

일단 저는 유튜브 코지코드의 무료강의를 보면서 공부하며 정리중입니다!

 

https://www.youtube.com/kossiecoder

 

---

 

 

 

 

1.함수 파라미터 사용하기

 

 

 

 

사진과 같이 nextYear함수에 파라미터명을 적어줍니다.

nextYear(hello){}

메서드에서 리턴할때 hello 를 사용하면 되고,

위에 nextYear('안녕하세요') 와 같이 hello 인자값을 문자열로 적어줍니다.

 

 

 

결과값을 한번 확인해 볼까요??

---

 

 

 

 

이와 같이 hello 인자 값인 '안녕하세요'가 return 된 것을 확인할 수 있습니다.

 

 

 

 

2. 데이터 바인딩 하기(inputBox).

 

 

데이터 바인딩을 위해 input박스를 만들어 보겠습니다.

기존의 자바스크립트와 동일합니다.

<input type="text" value="안녕?"></input>

 

 

 

아래와 같이 inputBox안에 '안녕?'이라는 문자열이 찍히는 것을 확인 할 수 있습니다.

 

---

 

결과화면

 

 

데이터로 input박스의 요소들을 바인딩 해 보겠습니다.

 

 

 

v-bind: 를 사용하여 데이터를 바인딩 할 수 있다.

 

 

사진과 같이 data안에 type:'numner' 를 생성해 준 후

사용 시 v-bind:type="데이터명" 으로 해주시면 됩니다.

 

 

결과화면

 

 

 

결과화면과 같이 type이 number인 input박스가 생성됩니다. 

당연히 number타입이라 "안녕?" 의 문자열의 값은 찍혀있지 않습니다.

 

 

 

두번째 예시

 

 

v-bind: 를 사용하여 데이터를 바인딩 할 수 있다.

 

사진과 같이 data안에 type:'text' 과 value:'안녕~~' 생성해 준 후

v-bind:type="데이터명" v-bind: value ="데이터명" 으로 해주면 

 

짜잔!

 

---

 

결과화면과 같이 type이 'text'고 value값이 '안녕~~'인 input박스가 생성됩니다. 

 

 

 

3. 데이터 바인딩 하기(a태그).

 

 

이번에는 a태그로 하이퍼 링크를 만들어보겠습니다.

먼저 기존의 하드코딩 시 사진입니다.

 

 

 

 

다음으로는 a태그 바인딩 시의 예제입니다.

 

 

 

<a :href="">와 같이 href앞에 : 를 붙여줍니다.

 

 

데이터 바인딩으로

아래와 같이 코지코너채널로 연결된 하이퍼링크가 생성되었습니다.

 

---

 

결과화면

 

 

 

다음 예제로는

메서드를 사용하여 데이터 바인딩을 해보겠습니다.

 

 

아래 사진과 같이 methods에 getKossieCoderLink메서드를 생성한 후

파라미터 값으로 channel을 받아줍니다.

return this.link + channel 을 하여 리턴해주면.

return 값은 실제로 'https://www.youtube.com/' + channel(인자값) 이 됩니다. 

 

 

 

href내용으로 "메서드명(인자값)"을 사용하여 화면에 뿌려줍니다.

 

 

메서드로 바인딩하기.

 

---

 

 

결과화면

 

 

---

 

오늘은 데이터 바인딩에 대해 알아 보았습니다.

질문은 댓글로 남겨주세요~!

감사합니다.