일단 tap을 만들거임 ㄱㄱ
<div> 내용0 </div>
<div> 내용1 </div>
<div> 내용2 </div>
<button> 버튼0 </button>
<button> 버튼1 </button>
<button> 버튼2 </button>app.vue에 따라치십셔,,,
이게 tap의 시작이라고라..
왕!
버튼0을 누르면 내용0만 나오게끔 해야함 == 동적인 UI를 생성해야한다
동적인 UI 생성 방법
-
UI의 현재 상태를 데이터로 만들기
-
상태에 따라 HTML이 어떻게 보일지
-
UI의 현재 상태를 데이터로 만들기
data(){
return{
게시물 : Postdata,
더보기 : 0,
step : 0
}
}, 일단 data 부분에서 step 이라는 데이터를 하나 만들어주자
step은 현재 tap이 어떻게 보이는지 보여주는 데이터임
0이면 0번째 데이터,,, 1이면 1번째 데이터 이런식이여서 정수로 표현함
- 상태에 따라 HTML이 어떻게 보일지
<div v-if="step == 0"> 내용0 </div>
<div v-if="step == 1"> 내용1 </div>
<div v-if="step == 2"> 내용2 </div>
<button> 버튼0 </button>
<button> 버튼1 </button>
<button> 버튼2 </button>응응 이런식으로 if 문 사용해서 적용하면 동적인 UI 생성할수 있음ㅋㅋ;
step의 데이터에 따라서 내용이 유동적으로 변하는걸 확인할 수 있음
이제 버튼은 누르면 step의 데이터가 변하는걸 넣으면 된다
@click 처리해서 JS 코드로 step 변경하면 될듯
<div v-if="step == 0"> 내용0 </div>
<div v-if="step == 1"> 내용1 </div>
<div v-if="step == 2"> 내용2 </div>
<button @click="step = 0"> 버튼0 </button>
<button @click="step = 1"> 버튼1 </button>
<button @click="step = 2"> 버튼2 </button>이러면 이제 버튼 누르면 누르는대로 내용이 잘 변경됨
옹 ^~^
정리
데이터 만들기
vif로 데이터 변동하기
click 같은 이벤트처리로 원하는 기능 구현하기
일단 당장 필요하진 않으니…. 주석처리 ㄱㄱ
진짜 진짜 tap 만들기
페이지 2개를 만들어 보자
필터를 적용하는 페이지, 글을 작성하는 페이지
페이지를 나누려면 vue-router를 사용하지만
tap UI를 쓰면 더 쉽게 만들수 있다
유저는 걍 모르니 개발자가 편한 방법으로 ㄱㄱ
Container.vue로 고고혓
컨테이너에 여러 화면이 담기게 해봅시당
일단은 css와 style을 미리 준비했슴당… ㄱㄱ
- code
<template> <!-- 저번시간에 만든거 --> <Post :게시물="게시물[i]" v-for="(a, i) in 게시물" :key="i" /> <!-- 필터선택페이지 --> <div class="upload-image"></div> <div class="filters"> <div class="filter-1"></div> <div class="filter-1"></div> <div class="filter-1"></div> <div class="filter-1"></div> <div class="filter-1"></div> </div> <!-- 글작성페이지 --> <div class="upload-image"></div> <div class="write"> <textarea class="write-box">write!</textarea> </div> </template> <script> import Post from './Post.vue'; export default { name : 'InstaContainer', components: { Post, }, props : { 게시물 : Array, } } </script> <style> .upload-image{ width: 100%; height: 450px; background: cornflowerblue; background-size : cover; } .filters{ overflow-x:scroll; white-space: nowrap; } .filter-1 { width: 100px; height: 100px; background-color: cornflowerblue; margin: 10px 10px 10px auto; padding: 8px; display: inline-block; color : white; background-size: cover; } .filters::-webkit-scrollbar { height: 5px; } .filters::-webkit-scrollbar-track { background: #f1f1f1; } .filters::-webkit-scrollbar-thumb { background: #888; border-radius: 5px; } .filters::-webkit-scrollbar-thumb:hover { background: #555; } .write-box { border: none; width: 90%; height: 100px; padding: 15px; margin: auto; display: block; outline: none; } </style>
크게 필터 선택화면, 글 작성화면으로 우아래로 나눔
이제 tap으로 동적인 UI를 맹들어 보자
step이라는 데이터가 일단 app.vue에 있으니 props로 데이터를 전달하고 v if로 화면을 표시해야할듯
<Container :게시물="게시물" :step="step"/>일단 step 데이터를 props 해야하니 app.vue의 컨테이너 코드에서 처리를 해주고
props : {
게시물 : Array,
step : Number,
}Container 컴포넌트에서 props 등록울 해주자
<Post v-if="step == 0":게시물="게시물[i]" v-for="(a, i) in 게시물" :key="i" />그 다음 if 문 적으면 됨!
안됨!
if 문이랑 for문 같이 쓰면 안좋다고 오류남;;
그래서 따로 div로 빼준다음에 if 문 돌리셈
왕~ 잘돌아간당
<!-- 필터선택페이지 -->
<div v-if="step == 1">
<div class="upload-image"></div>
<div class="filters">
<div class="filter-1"></div>
<div class="filter-1"></div>
<div class="filter-1"></div>
<div class="filter-1"></div>
<div class="filter-1"></div>
</div>
</div>
<!-- 글작성페이지 -->
<div v-if="step == 2">
<div class="upload-image"></div>
<div class="write">
<textarea class="write-box">write!</textarea>
</div>
</div>
step이 1,2일때도 화면이 잘 바뀜을 볼수있담~
나머지들도 if문 사용해서 필터와 글 작성을 선택했을때 화면이 바뀌게 설정을 해줌
이제 버튼같은거 만들어서 click으로 이벤트 설정해서 step 값 바꿔주면 될듯
느낀점
동적인 UI 사용하는법 정확히 익히자
1. 데이터 만들고
2. if문 처리하고
3. 이벤트 처리로 바꾸기