[Vue.js] 추가기능구현 input 값 데이터 연동 및 저장

    Vue js 프로젝트 생성하기

 

$ vue install -g @vue/cli
$ vue create vue-todo(폴더명)

 

Manually select features

Babel, TS, Linter

Vue 2.x

Class-style component syntax (No)

Babel alongside TypeScript (Yes)

ESLint + Prettier

Lint on save

In dedicated config files -> 파일을 따로 관리하는 게 확장성이 더 높다.

 

    @로 경로 찾기​

{
    "compilerOptions": {
        "baseUrl": ""
    }
}

 

jsconfig.json 파일을 프로젝트 폴더 안에 만들어서 안의 내용을 추가한다.

그러면 @로 경로를 찾을 수 있다.

 

 

    TodoInput.vue 

<template>
  <div>
    <label for="todo-input"></label>
    <input id="todo-input" type="text" />
    <button @click="addTodo" type="button">버튼입니다</button>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  methods: {
    addTodo() {
      console.log("add");
    },
  },
});
</script>

<style scoped></style>

 

    App.vue 

<todo-input></todo-input>

 

 

코드실행

<todo-input></todo-input> 컴포넌트에 데이터 내려주기

 

<input type="text" />

인풋태그는 사용자가 입력을 할 수 있는 UI 영역이고 그쪽에 데이터가 인스턴스와 연결이 되어 있어야 v-model을 쓴다거나 method를 이용해서 API를 요청할 수 있다.

 

    인스턴스에 데이터 연결하기

App.vue

data 단축명령어는 vda다.

 

todoText를 <todo-input>에 내려줄 것입니다.

(todoText의 값을 내가 임의로 바꾸면 todo-input에 값이 삽입됨.)

 

 

 

TodoInput.vue

export default Vue.extend({
  props: ["todoitem"],
  methods: {
    addTodo() {
      console.log("add");
    },
  },
});​

 

App.vue

<template>
  <div>
    <h1>Vue 할 일 관리 with TypeScript</h1>
    <todo-input :todoItem="todoText"></todo-input>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import TodoInput from "./components/TodoInput.vue";
export default Vue.extend({
  components: { TodoInput },
  data() {
    return {
      todoText: "",
    };
  },
});
</script>

 

App.vue

<todo-input></todo-input>은 TodoInput.vue를 의미한다.

 

App.vue

data() { return { todoText : "" };  todoText를 선언하고

 

App.vue

<todo-input :item="todoText"></todo-input> 방금 선언한 todoText를 TodoInput.vue랑 연결해준다.

 

<template>
  <div>
    <label for="todo-input"></label>
    <input id="todo-input" type="text" :value="todoitem" />
    <button @click="addTodo" type="button">할 일 추가</button>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  props: ["todoitem"],
  methods: {
    addTodo() {
      console.log("add");
    },
  },
});
</script>

<style scoped></style>

props에 선언한 "item"을 input에 :value="item"으로 집어넣으면 todoText의 값을 페이지검사로 내가 임의로 바꿨을 때 todo-input에 값이 삽입됨.

 

 

Vue 

 

@input="메소드 이름"

 

->input이라는 이벤트는 인풋태그에 하나하나 칠 때마다 인풋 이벤트가 일어납니다.

 

todoInput.vue

<template>
  <div>
    <label for="todo-input"></label>
    <input id="todo-input" type="text" :value="todoitem" @input="handleInput" /> <!-- input의 input이벤트 -->
    <button @click="addTodo" type="button">할 일 추가</button>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  props: ["todoitem"],
  methods: {
    handleInput(event: any) {
      event.target.value;
      this.$emit("input", event.target.value); <!-- emit의 input이벤트 -->
    },
    addTodo() {
      console.log("add");
    },
  },
});
</script>

<style scoped></style>

input의 input이벤트와 $emit의 input이벤트는 서로 다른겁니다.

@input 이벤트는 키보드 이벤트임!

$emit의 input이벤트는 컴포넌트간 대화하기 위한 수단이다!

 

 

App.vue

<template>
  <div>
    <h1>Vue 할 일 관리 with TypeScript</h1>
    <todo-input :todoitem="todoText" @input="updateTodoText"></todo-input>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import TodoInput from "./components/TodoInput.vue";
export default Vue.extend({
  components: { TodoInput },
  data() {
    return {
      todoText: "",
    };
  },
<!-- @input="updateTodoText"를 추가하고 methods에다가 입력해줍니다. -->
  methods: {
    updateTodoText(value: any) { <!-- updateTodoText의 첫번째 패러미터는 event.target.value의 값을 받아옵니다 -->
      this.todoText = value; <!-- @input="updateTodoText에 값을 입력하면 this.todoText = value;에 값이 들어온다.
                                  그 값이 todoText를 갱신 → todoItem(props)를 갱신해준다. -->
      
    },
  },
});
</script>

<style></style>

 

@input="updateTodoText에 값을 입력하면 this.todoText = value;에 값이 들어온다.
그 값이 todoText를 갱신 → todoItem(props)를 갱신해준다. 

 

<input type="text" v-model="todoText"> 한 것과 동일한 기능이다.

 

데이터 연동 성공!

    키와 밸류 데이터 저장하기

TodoInput.vue

  methods: {
    handleInput(event: any) {
      event.target.value;
      this.$emit("input", event.target.value);
    },
    addTodo() {
      this.$emit("add");
    },
  },

addTodo()에 this.$emit("add")를 추가한다.

meanwhile <button @click="addTodo"

 

App.vue

methods: {
  updateTodoText(value: any) {
    this.todoText = value;
  },
  addTodoItem() {
    const value = this.todoText;
    localStorage.setItem(value, value);
    ② this.initTodoText();
  },
  <!-- ①초기화 -->
  initTodoText() {
    this.todoText = "";
  }

 

Key, Value가 추가되었다!