Vue 시작하기 ②

 

저번 포스팅에 이어서 마저 Vue 시작하기 포스팅을 해보겠다!

 

 

 

 

자바스크립트에서 input 요소의 value를 vue에서 v-model을 통해 지정할 수 있다

위의 코드에선 input의 value를 msg라는 모델명으로 사용했다

<input type="text" v-model="msg">

 

그리고 input에서 작성한 내용(msg)이 바로 밑의 p요소의 innerText로 그대로 나오게끔 하기 위해

 

<p>{{msg}}</p>와

<p v-text="msg"></p> 두 가지 방법을 사용했다.

 

 

input 창에 v-model!!!이라고 작성해보니

기존의 {{}}와 v-text 두 가지 방법 모두 제대로 작동한다

 

 

 

 

 

 

위의 예시와 마찬가지로 v-model을 이용하여 value값을 제어한다

checkbox의 경우, 체크가 되어있으면 true 안되어있으면 false를 반환하는데

ture, false가 아닌 다른 값을 지정해줄 수 있다

 

<input type="checkbox"

v-model="isRun"

true-value="yes"

false-value="no">

 

이렇게 isRun의 checkbox는

true-value와 false-value를 사용하여

boolean값이 아닌 원하는 문자열 값을 준다

그래서 true일 경우 yes, fasle일 경우 no를 반환한다.

 

 

위 코드의 결과이다

하단의 체크박스(isRun)가 체크되어있어서

isRun:yes로 나와있는 걸 확인해볼 수 있다

 

 

 

 

 

이번엔 부트스트랩을 추가하였다

data에서 isPrimary, isLg 모두 false로 기본값을 지정해놔서 처음 페이지 실행 시,

버튼에 아무런 부트스트랩 클래스가 등록되어있지 않다.

그 후에 v-model인 sPrimary, isLg의 체크박스를 클릭하면 (체크가 된 상태가 되면)

v-bind:class="{'btn-primary':isPrimary, 'btn-lg':isLg}"의 두 값이 true로 변경되며

버튼에 부트스트랩 요소가 추가된다.

 

 

 

위의 코드에서 체크박스를 하나 씩 클릭할 때마다

버튼의 모양이 변한다.

개발 툴에서 확인해보면 클릭할 때 버튼 클래스에 추가가 되는 것을 확인 가능하다

 

 

 

 

 

위의 코드와 결과는 같지만,

오브젝트가 아닌 종속된 모델이 바뀌면 다시 호출되어서 연산된(computed) 값을 리턴하는 함수를 이용했다

 

 

 

 

이번에도 위의 결과와 같지만 다른 방식으로 구현하는 방법이다

v-bind:class=""에 삼항 연산자를 이용하여

isPrimary? 'btn-primary' : ' ' ,

isPrimary가 true이면 btn-primary 클래스이며, false면 아무런 클래스가 지정되지 않는다

 

 

체크박스 클릭 X

 

 

파란버튼 체크박스 클릭

 

 

개발 툴을 열어놓고 체크박스 클릭하면서 확인해보면

처음 상태는 false이므로 class에 btn만 존재한다.

그리고 체크박스 (위에선 파란색 버튼)를 체크하면 class에 btn-primary라는 클래스가 새롭게 추가된다.

 

 

 

 

vue를 통해서 html뿐 아닌 css도 조작이 가능하다

가장 첫 번째 줄은 정적으로 css 스타일을 지정해주었으며

두 번째와 세 번째 줄에는 하단의 인풋 박스를 통해 동적으로 계속 변경이 가능한 스타일로 지정해주었다

 

<p v-bind:style="{color:fontColor, fontSize: fontSize+'px'}">은

data의 fontColor와 fontSize의 기본값 (폰트 컬러 블랙, 폰트 사이즈 16)으로 처음 세팅이 되며,

두 데이터 모두 v-model로 연결되어 있다.

 

마지막 세 번째 줄의

<p v-bind:style="pStyle">의 경우,

앞서 말했던 computed를 통해서 변경이 될 때마다 함수의 호출이 일어나며

변경된 값으로 새롭게 리턴이 되어 즉시 적용된다.

 

 

 

두 번째, 세 번째 줄은 현재 기본값인 검정색상과 16 사이즈의 폰트로 스타일 되어있다

 

 

색상에 blue, 폰트 사이즈에 25를 입력하니

두 번째, 세 번째 줄의 스타일이 즉시 변경되었다

 

이렇게 vue를 통해 html 뿐 아닌 css 스타일도 정적으로 편리하게 변경이 가능하다