Vue.js + Express로 Memo 앱만들기(2)

1. front / views에 vue 파일 만들기

GroundView.vue 파일을 기본으로 

안에 다른 vue 파일들을 import 할 예정!!

 

 

 

 

 

 

 

GrandView.vue 파일 작성하기

<template>
  <div class="ground">
    <HeaderView></HeaderView>
    <MemoView></MemoView>
    <FooterView></FooterView>
  </div>
</template>

<script>
import HeaderView from "./HeaderView.vue";
import MemoView from "./MemoView.vue";
import FooterView from "./FooterView.vue";

export default {
  components: { HeaderView, MemoView, FooterView },
};
</script>

 

 

HeaderView.vue 파일 작성하기

<template>
  <header>Memo app</header>
</template>

<style scoped>
header {
  text-align: center;
  padding: 25px;
  border-bottom: 1px solid #eee;
  background-color: #f7f7f7;
}
</style>

 

 

 

FooterView.vue 파일 작성하기

<template>
  <div class="footer">&copy; Memo App. All rights reserved.</div>
</template>

<style>
.footer {
  background-color: #f7f7f7;
  border-top: 1px solid #eee;
  padding: 25px;
}
</style>

 

 

MemoView.vue 파일 작성하기

<template>
  <div class="memo">
    <div class="act">
      <button class="btn btn-primary">+ 추가</button>
    </div>
    <ul>
      <li>메모 내용 1</li>
      <li>메모 내용 2</li>
      <li>메모 내용 3</li>
    </ul>
  </div>
</template>


<style lang="scss" scoped>
.memo {
  .act {
    padding: 10px 10px 5px 5px;
    text-align: right;
  }
  ul {
    border: 1px solid #eee;
    list-style: none;
    padding: 0px;
    margin: 0px;

    li {
      padding: 5px 10px;
      margin: 5px;
    }
  }
}
</style>

 

 

다음과 같은 화면이 완성되게 됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

MemoView.vue 파일 수정하기(1)

<template>
  <div class="memo">
    <div class="act">
      <button class="btn btn-primary" @click="add()">+ 추가</button>
    </div>
    <ul>
      <li v-for="(d, idx) in data" :key="idx">{{ d }}</li>
    </ul>
  </div>
</template>

<script>
import { reactive } from "vue";

export default {
  setup() {
    const data = ["메모 1 내용", "메모 2 내용", "메모 3 내용"];
    const add = () => {
      state.data.push("추가된 메모 내용");
    };

    return { data, add };
  },
};
</script>

<style lang="scss" scoped>
.memo {
  .act {
    padding: 10px 10px 5px 5px;
    text-align: right;
  }
  ul {
    border: 1px solid #eee;
    list-style: none;
    padding: 0px;
    margin: 0px;

    li {
      padding: 5px 10px;
      margin: 5px;
    }
  }
}
</style>

 

 

버튼이 먹히도록,

MemoView.vue 파일 수정하기(2)

<template>
  <div class="memo">
    <div class="act">
      <button class="btn btn-primary" @click="add()">+ 추가</button>
    </div>
    <ul>
      <li v-for="(d, idx) in state.data" :key="idx">{{ d }}</li>
    </ul>
  </div>
</template>

<script>
import { reactive } from "vue";

export default {
  setup() {
    const state = reactive({
      data: ["메모 1 내용", "메모 2 내용", "메모 3 내용"],
    });

    const add = () => {
      state.data.push("추가된 메모 내용");
    };

    return { state, add };
  },
};
</script>

<style lang="scss" scoped>
.memo {
  .act {
    padding: 10px 10px 5px 5px;
    text-align: right;
  }
  ul {
    border: 1px solid #eee;
    list-style: none;
    padding: 0px;
    margin: 0px;

    li {
      padding: 5px 10px;
      margin: 5px;
    }
  }
}
</style>

 

 

 

다음과 같은 결과창이 나온다면,

아주 잘따라온 것 입니다!!