에르노트

[Vue] 뷰를 이용한 간단한 메모장 만들기 본문

Web/Vue&React

[Vue] 뷰를 이용한 간단한 메모장 만들기

두콩 2020. 9. 6. 23:09

뷰(Vue)에서는 데이터 바인딩과 각종 디렉티브를 활용하여 CRUD를 간단히 구현할 수 있다.

 

간단 메모장

 

[삽입]

addMemo(){
    if(this.newMemo.length == 0){
        alert("Fill in the blank!")
        return
    }
    this.list.push(this.newMemo)
}

 

[삭제]

deleteMemo(targetMemo){
    let index = this.list.findIndex(memo=>memo==targetMemo)
    if(index != -1) this.list.splice(index, 1)
}

 

[수정]

setEditMode(targetMemo, idx){
    this.newMemo = targetMemo
        this.state = EDIT_MODE.UPDATE
        this.updateIdx = idx
}

clearEditMode(){
    this.state = EDIT_MODE.ADD
    this.newMemo = ""
    this.updateIdx = -1
}

updateMemo(){
    this.list[this.updateIdx] = this.newMemo
    this.clearEditMode()
}

 

[전체소스]

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <title>Simple Memo</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
      <div>
            <span>name:<input type="text" class="memo-name" v-model="newMemo"></span>
            <template v-if="state=='add'">
                  <button class="btn-add-memo" @click="addMemo"> Add</button>
            </template>
            <template v-if="state=='update'">
                  <button class="btn-add-memo" @click="updateMemo"> Apply</button>
                   <button class="btn-add-memo" @click="clearEditMode"> Cancle</button>
            </template>
      </div>

      <div class="list">
            <ul>
                  <li v-for="(memo, index) in list" :key="index">
                        {{memo}}
                        <button @click="deleteMemo(memo)">Delete</button>
                        <button @click="setEditMode(memo, index)">Edit</button>
                  </li>
            </ul>
      </div>

</div>

<script>
      const EDIT_MODE = {
            UPDATE: "update",
            ADD: "add"
      }
      var data = {
            list:["abc","def", "hello_world"],
            newMemo:"",
            state:EDIT_MODE.ADD,
            updateIdx: -1
      }

      var vm = new Vue({
            el: '#app',
            data:data,
            methods:{
                  addMemo(){
                        if(this.newMemo.length == 0){
                              alert("Fill in the blank!")
                              return
                        }
                        this.list.push(this.newMemo)
                  },
                  deleteMemo(targetMemo){
                        let index = this.list.findIndex(memo=>memo==targetMemo)

                        if(index != -1)
                              this.list.splice(index, 1)
                  },
                  setEditMode(targetMemo, idx){
                        this.newMemo = targetMemo
                        this.state = EDIT_MODE.UPDATE
                        this.updateIdx = idx
                  },
                  clearEditMode(){
                        this.state = EDIT_MODE.ADD
                        this.newMemo = ""
                        this.updateIdx = -1
                  },
                  updateMemo(){
                        this.list[this.updateIdx] = this.newMemo
                        this.clearEditMode()
                  }
            }
      })
</script>
</body>
</html>

 

저작자표시

'Web > Vue&React' 카테고리의 다른 글

[Vue] @vue/cli에서 Network: unavailable 에러 해결법  (0) 2020.09.08
[Vue.js] 구름 IDE에서 localhost 접속 오류 해결하기  (0) 2020.08.16
[React] 구름IDE에서 리액트 직접 설치하고 구동하기  (2) 2020.08.08
'Web/Vue&React' Related Articles more
Comments