Vue.js 사용하기 -4( 화면 구성하기 - 기본 문법 )

기본 문법 

 Vue.js 사용하기전에 알아야한 vue 에서 제공하는 문법들을 알아야만 한다. vue.js 문법은 jquery 보다도 단순하다 생각한다. 그리고 html 자체내에서 사용가능한 문법들이 있어 익히는데 쉽다! 

보간법 

<b v-on:click="doDetail(value)"  class="onHyperLink">{{ value }}</b>

   DOM 에 데이터를 바인딩하는 방법이다. 저런식으로 선언할경우 간단하게 html 내부에 DOM 에 데이터 바인딩이 이루어진다. 보간법으로 바인딩 된 데이터는 순수 텍스트 속성을 띈다.

약어 

  - v-html 

<p>v-html: <span v-html="strHtml"></span></p>

  보간법을 사용하여 표시할경우 단순 텍스트 속성으로 밖에 표현이 안된다. 그렇기 때문에 html 기능을 사용하고 싶을땐 v-html 을 선언하여 이부분에 html 문법을 작성하여 사용이 가능하다.  줄바꿈이나 공백등을 표현할때 요긴하게 사용했다. 

  - v-bind

<span-table-header v-bind:headers="header_data"   ></span-table-header>

 v-model 과 동작은 같아보이지만 v-bind 로 선언할경우 동적으로 반영된다.  그렇기 때문에 동적으로 데이터가 바뀌는 부분이라면 v-bind로 선언하는것이 좋다. 연결변수가 변경될때마다 vue 에서 자동 감지 되기 때문에 굉장히 유용하게 사용이 가능하다. 

  - v-model 

<input v-bind:headers="header_data"   ></input>

 일반적인 정적인 문자열을 넣을때 사용하기 쉽다. 문자열이라던가 여러줄의 문자열들을 표현할수 있다. 

  - v-on 

<basic-button  type="primary"  @onClick="search" name="조회"></basic-button>

 이벤트를 등록할수있다. v-on 대신 @ 으로 줄여서 표현이 가능하다. 클릭부터해서 일반적으로 웹에서 사용가능한 이벤트들을 선언할수 있으며 search <- 이런식으로 함수를 연결하면 이벤트 발생시 자동으로 연결된 method 가 호출 된다. 

  - v-if  &  v-for 

<tr v-for="(body, index) in bodys" v-bind:key="index">
    <td v-for="(value, key) in body"  v-bind:key="key" v-bind:class=value.type >
        <div  v-if="key%2 === 0" >{{value.value}}</div>
        <div v-else>{{value.value}}</div>
    </td>
</tr>

 쓰면 쓸수록 복잡해지지만 굉장히 유용한 약어들이다. if 는 말그대로 분기문을 구현할수있다. v-for 는 루프문을 뜻하며 샘플 내용기준으로 보면 bodys 는 입력받은 값들이며 body는 bodys 중 하나의 값을 의미한다. index 는 루프문에서 인식하는 인덱스 값이다. 

 위 샘플 같은 경우는 v-for 를 이중으로 사용가능 하단걸 보여주는데 v-for 문에 v-bind 나 기타 약어들을 같이 사용이 가능하며 v-if 를 같은 태그 안에서 사용하다 . 

 v-if 경우 무조건 마지막에는 v-else 가 위치해야만 webpack 빌드시 에러가 자지 않는다 . 

이런구성의 특징은 for이 시작되면 무조건 tr은 생성이 된다. 하지만 if 에 해당되지 않을 경우 td 는 생성되지 않는다. 테이블을 루프로 구성하는것이기 때문에 이런 특성들이 나타난다. 

 

여기선 단순히 보간법을 이용한 데이터바인딩을 했지만 class 를 추가하여 css 를 다르게 줄수도 있다. 

구성 요소들

 - 체크 박스 

<div id="app">
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
</div>

 체크 박스를 구성할땐 위와 같이 구성하면 된다 단, 체크박스를 동적으로 구성할떄는 

<input  type="checkbox" v-model="toggle" true-value="yes"  false-value="no">

이렇게 구성하면된다 체크를 할경우에는 toggle 값을 yes 로 세팅 해주고 아닐경우 no 로 세팅 해주면된다 

 - 라디오 

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>선택: {{ picked }}</span>

 - 셀렉트  

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

select 박스를 구성는 방법이다.  selected 변수값을 통해 현재 선택된 값을 확인 할수 있다. option 값을 동적으로 구성하고 싶다면 v-for 을 이용하여 간단한 공용 컴포넌트로 만들어서 사용하면 재사용률을 높일수 있다. 

- 버튼  

<button v-on:click="openNew"></button>

 버튼 구성은 단순하다 위에 있는 v-on 과 함께 쓰면 쉽게 이벤트와 함께 버튼을 구성할수 있다. 

프로젝트를 진행하면서 사용한 약어및 구성 요소는 그래프를 제외하면 저정도 였던것 같다. 컴포넌트들은 기본 구성요소들을 커스텀해서 CSS 따로 줘서 용도별로 만들어 놓고 테이블 구성은 상황에 맞게 공용 컴포넌트처럼 따로 별도로 만들어 놓고 사용한거 같다. 

생각보다 구성하는 방식이 어렵지 않았고 헷갈리다 싶으면 그냥 javascript 와 html 문법을 사용해서 구성하면 됬기 때문에 큰 어려움은 없었다. ( jquery 로만 구성을 해봤다면 어려울수도 있을거 같다. 구성요소를 찾는 $ 에 익숫한 사람이라면 자바스크립트 를 좀더 봐야 할거 같다. ) 

 각 약어들이나 구성요소들은 null 값이 올경우 아예 생성을 안하거나 속성을 부여하지 않는다 어느정도 null 값에 대한 디폴트 처리가 되있는거 같다. 실수로 데이터 디폴트 처리를 안해서 null 이 들어가도 화면에 null 이란 문자를 나타내진 않을 거 같다. 

 컴포넌트를 만들어서 재사용해도 되겠지만 오픈되있는 vuetify 프레임워크를 좀 공부해서 사용하면 제법 그럴싸한 컴포넌트를 만들어 낼수 있지 않을까 싶다.