37일차

오늘 목표

• 주말동안 vue.js강의 최대한 많이 나가기

이번주 목표

• 작심삼일을 삼일에 한번하자!!

새로 배운 내용

vue.js를 이용한 토글구현

<template>
  <ul class="item__list">
    <li class="item">
      로그인
    </li>
    <li class="item">
      회원가입
    </li>
    <li class="item">
      고객센터
    </li>
    <button 
      @click="handler">  //버튼을 클릭하는 경우 handler메소드 실행
      Global
    </button>
    <ul
      v-if="isShow"  // handler메소드 실행 시 isShow가 true가 되어, 화면에 보이게 된다. 
      class="global__list">
      <li class="list">
        영어
      </li>
      <li class="list">
        한국어
      </li>
    </ul>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    handler() {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style lang="scss" scoped>
  .item__list {
    display: flex;
    position: relative;
    width: 400px;
    height: 20px;
    justify-content: space-between;
    align-items: center;
    .item {
      padding-right: 10px;
    }
    .global__list {
       position: absolute;
       top: 20px;
       right: 0;
       border: 1px solid gray;
      .list {
        padding: 10px;
      }
    }
  }
</style>

변이메서드

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

비변이메서드

• concat()
• filter()
• slice()

vue

• [Vue] 정리

하루를 마무리하며

• vue.js강의를 들으며 이번 과제를 하는 동안 만들어보았던 컴포넌트를 vue문법을 이용해 한번 구성해보았다. 코드를 작성하면서 느낀 점은 이래서 vue를 사용하는구나?? 이었다.👍👍 올해 초에도 vue강의를 도전했다가 따라가지 못한 적이 있었는데 확실히 기본을 어느정도 배우고 다시 들으니 무슨 이야기를 하는지, 왜 효율적인지 등등이 보이고 실제로 코드에 적용을 해볼 수 있는 것 같다.