vue.js 환경에서의 UI 방법론(지극히 개인적인)

Vue.js로 UI 개발 하기

vue.js 환경에서 어떻게 UI마크업과 기능을 만들어 볼까?

처음부터 어떻게 사고할지 방법론으로 풀어보았어요.

※ 모달창 만든 작업 예시를 바탕으로 작성됨

 

 

 

1. UI(구현할)의 현재 상태를 data()로 저장해둔다. (ex.true / false or 1/0)

<script>
export default {
  name: 'App',
  data(){ //data : 보관함 / state 라고 불림(데이터의 상태 보관)
    return{
      modal:false,
    }
  },
}
</script>

 

 

 

2. 1.번에서 작성한 data() 상태에 따라 UI가 어떻게 보일지 작성(ex. v-if/ @click ...등등)

<div class="black-bg" v-if="modal==true"> <!--v-if > true일때만 show-->
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
    </div>
  </div>

 

 

 

3. UI 이벤트 적용 시키기 

<div>
    <h4 @click="modal=true">{{dataProducts[0]}}</h4> <!-- @click="modal=true" 이벤트적용-->
 </div>

 

 

이방법도 저방법도 여러가지 방법을 고안해내는 중이다.