Vue.js에서 html에 style넣기, 그 외 Vue의 methods에서 function 안쓰는 이유

1)

:style 이렇게 넣을 수 있는데,

 

그냥 넣을수도 있지만, 좀 더 가독성좋은 방법으로 저렇게 객체 형식으로 집어넣을 수 있다.

 

 

2)

 

Vue에서 컴포넌트는 파일 하나당 객체 형식으로 이루어진 자체 script를 갖는다.

 

그리고 export default로 해당 객체 형식 스크립트를 내보낸다.

 

그 객체에는 name, props, data, methods 등의 key값이 있는데 그 안에 value들이 또 key, value로 나뉘어져 페이지의 데이터와 함수 동작을 정의한다.

 

여기서 Vue는 data, props에 정의된 변수를 쓰려면 this.를 앞에 꼭 붙여야한다.

 

script 내의 this는 export default 되는 컴포넌트 가장 상위의 객체 형식 script가 되기 때문이고

 

그 안의 data 변수를 가리키려면 this를 당연히 붙여야한다.

 

그러나 function()을 사용하면 해당 함수 안에서 this의 값이 data의 변수를 가리키는게 아닌, window를 가리키게된다.

 

따라서 Vue에서는 methods 내에 함수를 넣을 때 function이 아닌 화살표 함수를 써주는게 일반적이다.