input v-model , Storage, enter 눌렀을 때 저장

로컬스토레지에 저장하는 방식으로 진행한다.

 

v-model은 vue의 인스턴스안에 바로바로 저장하는 역할을 한다.

- 양방향 바인딩

 

<template>
    <div>
        <input type="text" v-model="newTodoItem">
    </div>
</template>

<script>
export default {
    data : function(){
        return{
            newTodoItem : ""
        }

    }
}
</script>

<style>

</style>

 

data 안의 변수에 연결해주면 실시간으로 입력하는 값 으로 바뀌게 된다.

 

값 확인을 하기 위한 메소드 작성

 

<template>
    <div>
        <input type="text" v-model="newTodoItem">
        <button v-on:click="addTodo">add</button>
    </div>
</template>

<script>
export default {
    data : function(){
        return{
            newTodoItem : ""
        }

    },
    methods : {
        addTodo: function(){
            console.log(this.newTodoItem);
        }
    }
}
</script>

<style>

</style>

 

 

그 다음 localStorage에 저장해보자

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN

 

localStorage.setItem(this.newTodoItem,this.newTodoItem);

키:밸류 형태

 

 

리팩토링하면 아래처럼 된다. 한 메소드가 하나의 일만 하게 끔 바꿨다.

 

this는 자기자신을 가리킨다. 해당 인스턴스를 가르키니 this를 이용해서 메소드, 변수 등을 가르킬 수 있다.

 

 

<template>
    <div>
        <input type="text" v-model="newTodoItem">
        <button v-on:click="addTodo">add</button>
    </div>
</template>

<script>
export default {
    data : function(){
        return{
            newTodoItem : ""
        }

    },
    methods : {
        addTodo: function(){
            //저장하는 로직
            localStorage.setItem(this.newTodoItem,this.newTodoItem);
            this.clearInput();
        },
        clearInput : function(){
            this.newTodoItem = '';
        }
    }
}
</script>

<style>

</style>

 

엔터 터치 등 추가

<template>
    <div>
        <input type="text" v-model="newTodoItem">
        <button v-on:click="addTodo" v-on:keyup.enter="addTodo">add</button>
        <span class="addContainer" v-on:click="addTodo">
            +
        </span>
    </div>
</template>

<script>
export default {
    data : function(){
        return{
            newTodoItem : ""
        }

    },
    methods : {
        addTodo: function(){
            //저장하는 로직
            localStorage.setItem(this.newTodoItem,this.newTodoItem);
            this.clearInput();
        },
        clearInput : function(){
            this.newTodoItem = '';
        }
    }
}
</script>

<style scoped>
input:focus{
    outline : none;
}
.inputBox {
    background : white;
    height: 50px;
    line-height: 50px;ßßßer-radius : 5px;
}
.inputBox input{
    background : none;
    font-size: 0.9rem;
}
.addContainer {
    float : right;
    background : linear-gradient(to right, #6478FB, #8763FB);
    display : block;
    width : 3rem;
    border-radius: 0 5px 5px 0;
}
.addBtn {
    color: white;
    vertical-align: middle;
}
</style>