Vue. JS

02. 뷰 데이터(DATA) 와 메소드 (METHODS)

WOOKTAE 2021. 1. 27. 23:45

1.  뷰 데이터 (DATA)

위에 그림과 같이 {{  }} 를 먼저 입력한 뒤 {{    선언한 데이터 명 입력  }} 

 

data 안에 person 이란 오브젝트 안에 name 과 age 를 선언 하면

 

이와 같이 브라우저 에서 입력값 확인 가능 !

 

 

2. 메소드 (METHODS)

 

먼저 메소드를 선언하자 nextYear 에 보면 this.data.person.name 이라고 안한 이유는 vue 에서는 this.person으로 사용할 수 있도록 자동으로 찾아준다고 한다. (참고해서 보는 유투브 설명이 그랬음)

 

선언한 메소드를 사용하기위해 {{  사용한 메소드 명과 인자 값을 입력했다. }}

그리고 브라우저를 보게 되면 !!

 

메소드에 선언한 내용이 잘 출력되는걸 확인할 수 있다.

 

( 정석적으로는 메소드 선언시 메소드명: function(매개변수){   메소드 내용 }  이렇게 사용해야 하나 VUE 에서 간편 모드로 메소드명(매개변수) { 메소드 내용 } 으로 선언하고 사용할 수 있도록 간편 서비스를 제공한다.)

'Vue. JS' 카테고리의 다른 글

07 Watch 속성  (0) 2021.02.03
06 Computed 속성  (0) 2021.02.03
05. 데이터 양방향 바인딩 (Data Two Way Binding)  (0) 2021.01.31
04. 이벤트(Event)  (0) 2021.01.31
03 데이터 바인딩 (Data Binding)  (0) 2021.01.27