Vue JS 리스트 실습

Vue 기능 관련 검색을 하다가 한국 커뮤니티 사이트를 찾았는데 (https://vuejs-kr.github.io/meetup/#/)
현재는 활동하지 않는 것 같다.
둘러보던 중 Vue Playground를 찾게 되서 시간 있는 김에 간단한 실습을 해봄!
일반적으로 처음에 많이 하는 게시판이지만, 사실 게시판도 아니고 그냥 데이터 입력, 삭제만 구현함.

생각보다 실습하기 쾌적하게 되어있어서 좋았다.
Vue SFC Playground : https://play.vuejs.org/

Vue SFC Playground

 

<script>

export default {
  data() {
    return {
      msg: 'Hello World!',
      cnt: 0,
      list: []
    }
  },
  methods: {
    register() {
      this.cnt ++;
      return this.list.push(this.msg + this.cnt);
    },
    deleteContent(idx) {
    	//데이터 입력할땐 push로 해도 되지만, 삭제할땐 해당 index 값에 맞는 데이터를 삭제해야하므로
        //splice를 사용함
      return this.list.splice(idx, 1);
    }
  },
  watch: {
  	//list가 비워지면 cnt를 초기화한다.
    //새로입력되는 값의 this.cnt가 1부터 시작하도록 하기 위한 작업.
     "list": {
        handler() {
          if(this.list.length === 0) {
            this.cnt = 0;
          } 
        },
        deep: true
    }
  }
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg">
  <button v-on:click="register"> register </button>
  <hr>
  <ul>
    <li v-for="(content, idx) in list" :key="idx">
      {{ content }}
      <button v-on:click="deleteContent(idx)">del</button>
    </li>
  </ul>
</template>

<style scoped>
hr{
  background-color: red;
  height: 3px;
}
h1 {
  font-weight: 300;
  direction: rtl
}
ul {
  color: aliceblue;
  background-color: gray;
  font-family: Arial;
  font-weight: bold;
}
</style>

 
짧은 시간동안 뚝딱뚝딱 만든 코드라 조잡할순있지만
실무 코드 보다가 이걸 만드니까 머리도 가벼워지고 재밌당..
나 코드 좋아하네..?