Vue.js 네번째

views 폴더 : 우리가 화면을 띄울 때 전체 화면을 차지하는 .vue 파일의 모음

components 폴더 : 우리가 재사용 가능한 .vue 파일들을 모아두는 곳

화면 전체를 표시하는 .vue 파일은 View 를 끝에 붙이는 것이 네이밍 룰이다.

 

React 는 html 을 js 로 같이 병합해서 써준다. 이때 어떠한 html 을 변경할 일이 있다면 이를 고치는 것이 어렵다.

Vue 는 html 과 js, css 따로 쓰기 때문에 변경점이 있을 때 조금 더 수월하다.

 

vue2 에서는 h1, p 태그 같은 것들을 div 같은 상위 태그로 감싸주어야 한다. vue3 에서도 오류는 안나지만 감싸는 습관을 들이자.

 

Databinding 

1. 단방향

우리가 html 에 있는 글자를 바꾸기 위해서는 JS 에서 코드를 짜주면 된다. (document....innerhtml...)

이런 방법 말고 vue 에서는 Databinding 으로 바로 연결해주는 방법이 있다. 

미리 데이터를 담아두고 or 서버에서 데이터를 받고 그것을 html 안에 넣어주는 방식이다.

 

문자열을 Databinding 하는 것은 {{DataName}} 으로 해주면 된다.

html 코드를 Databinding 하는 것은 <div v-html="<code>"> </div> 로 속성 값에 넣어주면 적용이 된다. 

 

2. 양방향

우리가 이전에는 사용자가 input 태그에서 입력한 내용을 다루기 위해서는 document.getElementById 로 html 에 접근하고 그 value 를 읽어오는 코드를 짰어야 한다.

vue 에서는 document 객체를 사용하지 않고 데이터를 주고 받고 지지고 볶고 할 수 있다.

 

사용자에게서 데이터를 입력 받고 띄울 수 있는 양방향 Databinding 은 사용자가 데이터를 변경하면 바로 적용이 된다.

<input type="text" v-model="userId" />

원래 userId 가 "kim" 이고 사용자가 input 으로 변경한다면 자동으로 데이터가 바뀌고 적용이 바로 된다.

 

<button @click="myFunction">클릭</button> 을 사용해 this.userid 를 변경해서 찍어보면 데이터가 연결된다는 것을 알 수 있다.

( @ 는 이벤트 리스너이다 ) ( 함수를 호출할 때 매개변수가 없다면 괄호와 세미콜론 생략 가능 )

 

양방향 Databinding 

앵귤러가 양방향 Databinding 을 처음 출시 획기적, 혁명적

하지만 웹 사이즈가 점점 커지며 데이터를 많이 주고 받을 때 페이지가 느려지는 현상 발생

그때 Facebook 에서 React 를 출시 빠르게 구동할 수 있도록 가상 돔을 이용해 실제 돔에 반영하는 것은 한번만 하도록 시행, 속도가 엄청나게 빨라지고 개발자들이 많이씀

하지만 양방향 Databinding 은 지원하지 않음

이때 Vue 는 양방향 Databinding 과 가상 돔을 사용함

 

양반향 Databinding 도 다 같진 않다.

Select 와 Input 은 사용자가 직접적으로 데이터의 value 와 v-model 로 연결되어 값을 바꾸게 된다. 

Select 서울을 하면 value = 02 로, Input "김" 을 하면 userId = 'kim' 으로

하지만  Checkbox 를 하면 v-model 과 연결된 것은 체크 되었는지 아니었는지의 여부이다. 그것의 여부에 따라 value 값이 전해지거나 바뀌는 것이다.

 

 

정리모음

v-html="<code>" : 데이터 바인딩 시 html 코드 삽입하기 ( C언어의 싱클쿼터 느낌 ) / 함수에 따라 html 바뀌게 하고 띄우기도 되겠지?

v-model="Data" : 양방향 데이터바인딩으로 사용자가 변경한 데이터를 즉각적으로 반영함 

v-bind:value="Data" : 단방향 데이터 바인딩으로 data 를 가져올 때 쓰고 사용자에 의해 변경되지 않도록 한다.

v-on (@)Event="Function" : 이벤트가 발생했을 때 함수를 실행시킴

id="ID" : 보통은 우리가 JS 와 연결하기 위해서 사용했지만 vue 를 사용함으로써 안써도 된다. / 이제는 다른 html 태그와 연결할 때 쓴다.

name="Name" : 마찬가지로 JS 와 연결하기 위해 사용했지만 vue 에서는 v-model 을 사용하며 거의 안씀

@change="changeCity($event)" : 바뀌었다는 이벤트를 changeCity 함수에 매개 변수로 전달