본문 바로가기

Frame-Work/Vue-JS8

7. Vue js - Component ㅁ Component 긴 HTML을 한 단어로 줄일수 있는 문법 ㅇ App.vue - 너무 많은 HTML이 있으면 가독성이 떨어짐 - 각각 Component 만들어서 관리함, 소스수정에 용이함 - 모듈 2021. 5. 27.
6. Vue js - 데이터 가져오기 내보내기(import / export) - feat v-for ㅁ 데이터 가져오기 내보내기 ㅇ 사용용도 > 데이터(값, 이름, 기타 드럼 등등)를 가져와서 화면에 뿌링글 할때 사용함 ㅇ 데이터파일 만들기 assets 폴더 하위 data.js ㅇ 데이터 내용은 아래와 같습니다. ㅇ 데이터는 오브젝트 형식으로 만들어짐 [ 값, export default [ { id : 0, title: "0번 데이터 입니다.", content: "0번 데이터 입니다.", }, { id : 1, title: "1번 데이터 입니다.", content: "1번 데이터 입니다.", }, { id : 2, title: "2번 데이터 입니다.", content: "2번 데이터 입니다.", }, { id : 3, title: "3번 데이터 입니다.", content: "3번 데이터 입니다.", }.. 2021. 5. 27.
5. Vue js - v-if(조건식) ㅁ v-if 사용예 ㅇ 기능설명 : 클릭 했을때 모달창 보여주고 클릭했을때 모달창 닫기 상세 페이지 상세 페이지 내용 현재상태저장데이터 : true, // 1. v-if 상태 저장 데이터 o, 1 or ture, false v-if="현재상태저장데이터 == true" 면 보이고 false 면 안보임 오ㅐ? 현재상태저장데이터 : true, 의 조건이 맞아야 보임, false 면 처음 저장해둔 상태값과 다르기 때문에 안보임 ㅇㅋ? ㅁ 응용 모달창 열고 닫기 상세 페이지 상세 페이지 내용 닫기 모달창 열기 ㅁ 결론 현재 저장된 상태값만 변경하면 동작함 2021. 5. 27.
4. Vue js - 이벤트 핸들러 ㅁ 버튼 이벤트 핸들러 수박 1만원 과일구매 구매개수 : 0 ㅁ 버튼 이벤트 생성 과일 구매 or 과일 구매 ㅁ 버튼 클릭에 따라서 버튼수 저장 변수 export default { name: 'App', data() { return { 과일개수 : 0, } }, components: { } } ㅁ 버튼 이벤트 클릭 했을때 버튼 수량 증가++ 과일구매 과일구매수량 : {{과일개수}} or 과일구매 과일구매수량 : {{과일개수}} ㅁ 함수 만들어서 버튼 이벤트 사용가능(응용) ㅇ 함수 : 긴코드를 짧은 단어로 축약 할수 있다. 과일구매 과일구매수량 : {{과일개수}} ㅁ 함수등록 export default { name: 'App', data() { return { 과일개수 : 0, } }, methods: .. 2021. 4. 28.

티스토리툴바