[Vue] Vue01

뷰 인스턴스 생성

data 상세

 

메소드 사용

 

nextYear:function() 과 그냥 바로 otherMethod() 로 메서드 이름을 쓰는 것은 같다.

 

데이터 바인딩

input 태그에 v-bind:value="inputData"로 쓰지만 v-bind를 생략하고 콜론만 써서 :value="inputData"로 축약해 쓸 수 있다.

 

이벤트

 

button 태그의 onclick 대신에 v-on을 붙혀 이벤트를 걸 수있다.

.prevent 이벤트 수식어를 사용해 form이 submit 한 뒤에 페이지를 다시 로드 하는 것을 막았다.

 

이벤트 수식어

 

데이터 양방향 바인딩

input 태그의 내용이 바뀌는 즉시 바로 밑에 {{text}} 부분에 띄우고 싶다

keyup 이벤트에 v-on을 걸어 target.value의 내용을 this.text에 띄우는 방법이 있지만

간단하게 v-model로 양방향 바인딩을 걸어 내용이 바뀌는 즉시 띄울 수 있도록 할 수 있다.

 

컴퓨티드

 

 

※메서드와 컴퓨티드의 차이점

컴퓨티드는 캐싱(저장)을 한다.

뷰 인스턴트가 생성이 될 때 컴퓨티드 속성이 생기면서 이미 계산된 값을 가지고 있다.

그래서 저장된 값을 쓰기만 할 뿐

메서드는 호출 때 마다 메서드의 내용을 계산한다.

 

컴퓨티드는 새로운 데이터 값에 맞춰서 값이 알아서 바뀐다.

위 그림에서 나와있는 changeMessage 메서드로 message 데이터 내용을 바꾸자 바로 값이 바뀐다.

 

 

Watch

 

대부분의 경우 컴퓨티드 속성이 적합하지만 watch를 써야할 경우가 있다.

데이터를 지켜보고 있다가 변경이 생기면 기존값은 oldValue에 새로운 값은 newValue에 저장한다.

감시자(watch)가 message데이터를 감시 하고 있다가 changeMessage메서드를 이용해 message 데이터의 값을 '안녕히가세요'로 바꾸자 마자 watch의 내용인

updated 데이터의 내용을 '네'로 바꾸는 작업을 수행하였다.

 

클래스&스타일 바인딩

v-bind를 이용해 div에 클래스를 바인딩 하는데 클래스이름에 -가 들어가 있으면 작은따옴표로 묶어주어 String으로 바꿔준다.

버튼에 isRed와 isBold값의 not값으로 값을 바꾸는 메서드를 적용시켜 버튼을 누르면 색상과 폰트굵기가 변한다.

 

 

style에 원래 font-size속성이지만 -를 빼고 다음 문자 대문자를 쓴다.

 

 

V-if

show data의 값이 true이기 때문에 처음에 1 2 3 이 보이는 결과가 나오게 된다.

show값을 not값으로 바꾸는 메서드를 실행하면 v-else부분인 no가 보이게 된다.

만약 v-else 부분이 없다면 아예 아무것도 없는 화면이 나오게 된다.

 

 

v-else-if

number 데이터값을 증가시키는 메서드를 통해 값을 증가시키면 값에 해당하는 v-if 부분 div가 화면에 나오게 된다.

숫자가 3을 넘어가면 해당하는 숫자가 없기때문에 else 부분은 no가 표시되게 된다.

 

V-Show

엘리먼트를 조건부로 표시하기 위한 또 다른 옵션이다.

v-if 와 비교해서는 

v-if는 초기 랜더링에서 조건이 거짓인 경우 아무것도 하지 않고 조건 블럭이 처음으로 참이 될때 처음 랜더링된다.

v-show는 초기 조건에 관계없이 엘리먼트가 항상 랜더링된다.

결국 v-if는 토글 비용이 높고 v-show는 초기랜더링 비용이 높다. 따라서 매우 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장함

 

V-for

수평선 위에 표시된 값들은 people데이터 수동으로 표시했기 때문에 데이터 값을 추가했을 경우 표시 되지 않는다.

v-for에서는 index를 표시할 수 도 있다.

key값은 유니크한 값으로 정해야 하는데 name등 하나의 컬럼으로 지정할 수 없는 경우 '-'를 이용해 여러컬럼을 지정할 수 있다.

 

여러개의 Vue 인스턴스 사용하기

 

여러개의 vue 인스턴스를 사용할 경우 el 태그로 원하는 태그와 연결을 하고

만약 다른 vue 인스턴스의 데이터를 조작하고 싶은 경우

vue 인스턴스를 변수에 담아주어 그동안 사용했던 this. 대신 vue인스턴스 변수의 이름을 넣는다.

위의 그림에서는 id가 app인 div에 있는 버튼을 눌러서 app-1의 텍스트내용을 바꾸는 내용이다.

 

Vue컴포넌트

컴포넌트도 vue인스턴스의 하나이다 다만 등록해놓으면 계속 가져다 쓸 수 있다.

두가지 방법이 있다.

1.전역 등록

2.지역등록

컴포넌트를 전역 등록하면 사용하지 않더라도 최종빌드에는 들어가게 되어 사용자가 내려받아야하는 자바스크립트 양이 불필요하게 커지게 된다.

그래서 지역등록을 활용하면 효율적이다.