7. Todo App 구현 - Footer

캡틴판교님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex강의를 정리했습니다.
매일 20분 야금야금 Vue.js 중급 화이팅.

IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools

---

푸터에는 '전체 삭제 버튼'을 만들어서 목록에 있는 할일을 전부 삭제해보자.

click이벤트에 메서드 연결하기

localStorage를 전체 삭제하는 clearTodo 메서드를 만든다.

<script>
export default {
  methods: {
    clearTodo: function(){
      localStorage.clear();
    }
  }
}
</script>

버튼에 메서드 연결하기

v-on:click="메서드이름" 으로 버튼에 메서드를 연결한다.

<template>
  <div class="clearAllContainer">
    <span class="clearAllBtn" v-on:click="clearTodo">Clear All</span>
  </div>
</template>

TodoFooter 전체코드 (스타일링 후)

<template>
  <div class="clearAllContainer">
    <span class="clearAllBtn" v-on:click="clearTodo">Clear All</span>
  </div>
</template>

<script>
export default {
  methods: {
    clearTodo: function(){
      localStorage.clear();
    }
  }
}
</script>

<style scoped>
.clearAllContainer {
  width: 8.5rem;
  height: 50px;
  line-height: 50px;
  background-color: white;
  border-radius: 5px;
  margin: 0 auto;
}
.clearAllBtn {
  color: #e20303;
  /* 추가 */
  display: block;
}
</style>

---

다음 시간에는 여태 만든 애플리케이션의 구조를 개선해본다.