🧶 𝗪𝗲𝗯/Vue

🧶 𝗪𝗲𝗯/Vue
[to-do-app] Vue Transition
transition-group {{ todoItem.item }} Vue 는 UI적으로 간편하게도 트랜지션 컴포넌트가 이미 프레임워크에 내재되어 있습니다. 해당 효과는 transition-group 태그를 통해 사용할 수 있으며, 해당 element 에 애니메이션 효과를 달 수 있습니다. name 속성은 해당 트랜지션의 이름이며, tag 는 해당 트랜지션이 적용될 element 를 이릅니다. 위의 코드는 list 라는 이름을 가진 ul 태그 transition-group 입니다. Vue3 버전 부터는 TransitionGroup 이라는 이름으로 사용할 수 있습니다. Transition CSS /* 리스트 트랜지션 */ .list-enter-active, .list-leave-active { transit..
→2022.02.26
🧶 𝗪𝗲𝗯/Vue
[to-do-app] Vue 모달 컴포넌트
웹에서 자주 쓰는 모달 컴포넌트에 대해서 포스팅을 해보고자 합니다. 강의를 들으면서 모달을 띄우는 것에 오류가 있었는데 해결을 해서 기쁘네요. 그럼 글 시작하겠습니다. 모달 컴포넌트 붙여넣기 Document https://kr.vuejs.org/v2/examples/modal.html 모달 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 도큐먼트는 다음 주소창으로 이동하면 나옵니다. 해당 도큐먼트에서 다음 코드들을 가져옵니다. Modal Html 코드 default header default body default footer Modal CSS 코드 .modal-mask { position: fixed; z-index: 9998; top: 0; left..
→2022.02.25
🧶 𝗪𝗲𝗯/Vue
[to-do-app] 리팩토링: 할 일 모두 삭제 기능
App.vue clearAll 이벤트가 발생하면 해당 컴포넌트의 clearAllItems 함수가 수행됩니다. // 할 일 모두 삭제 clearAllItems() { localStorage.clear(); this.todoItems = []; }, clearAllItems() 함수를 이용하여 로컬 스토리지도 비우고 todoItems 배열도 비워줍니다. todoItems 배열이 비워야지 화면에 즉각적으로 반영됩니다. TodoFooter.vue clearAll 이벤트를 emit 으로 발생합니다. 결과 화면 [Clear All] 버튼을 클릭했을 시 전부 다 삭제되는 것을 확인할 수 있습니다. vue clear vue 모두 삭제 vue 로컬 스토리지 vue all clear
→2022.02.24
🧶 𝗪𝗲𝗯/Vue
[to-do-app] 리팩토링: 할 일 완료 기능
App.vue toggleItem 이벤트가 발생하면 해당 컴포넌트의 toggleOneItem 함수가 수행됩니다. // 할 일 완료 toggleOneItem(todoItem, index) { this.todoItems[index].completed = !this.todoItems[index].completed; localStorage.removeItem(todoItem.item); localStorage.setItem(todoItem.item, JSON.stringify(todoItem)); // 갱신 }, todoItems[index] 로 접근을 합니다. 해당 요소의 completed 를 반대로 변경해줍니다. 그리고나서 로컬 스토리지에서 키를 이용하여 삭제를 하고 다시 해당 키로 JSON 형태로 다시 저..
→2022.02.24
🧶 𝗪𝗲𝗯/Vue
[to-do-app] 리팩토링: 할 일 삭제 기능
App.vue removeItem 이벤트가 발생하면 removeOneItem 함수가 발생합니다. // 할 일 삭제 removeOneItem(todoItem, index) { localStorage.removeItem(todoItem.item); this.todoItems.splice(index, 1); }, 로컬 스토리지에서 todoItem.item 키를 삭제합니다. 그리고나서 todoItems 안에 들어있는 요소를 삭제해야지 화면에 즉각적으로 반영이 됩니다. TodoList.vue // 리스트 요소 삭제 removeTodo(todoItem, index) { this.$emit("removeItem", todoItem, index); }, removeItem 이벤트를 발생시키며 뒤의 데이터를 상위 컴포넌..
→2022.02.24
🧶 𝗪𝗲𝗯/Vue
[to-do-app] 리팩토링: 할 일 추가 기능
App.vue 하위 컴포넌트 → 상위 컴포넌트 데이터 전달하기 v-on:하위 컴포넌트에서 발생하는 이벤트 명="현재 컴포넌트의 메서드 명" v-on 키워드를 사용합니다. 현재 컴포넌트에서 addOneItem() 함수를 만들고, 하위 컴포넌트에서 addTodoItem 이벤트를 전달하도록 하겠습니다. 즉, 하위 컴포넌트에서 addTodoItem 이벤트가 발생하면 addOneItem() 함수가 수행됩니다. data() { return { todoItems: [], // app.vue 에서 관리가 된다. }; }, methods: { // input에서 입력된 메모를 추가 addOneItem(todoItem) { var obj = { completed: false, item: todoItem }; // JSON..
→2022.02.24

• 이전
• 1
• 2
• 3
• 다음