[Vue.js]4.data, click, methods 사용하기

지난 포스팅에 이어서 이번에는 vue에서 data, event 등을 다루는 법을 알아보겠습니다.

 

1. data 다루기

Home.vue에서 export default 내부에 data() { return }를 추가해주고

return 뒤에 원하는 데이터를 { key : value } 형태로 넣어주면 됩니다.

그리고 그 데이터를 사용하기 위해서는 <template> 부분에서 {{ key }} 와 같이 중괄호 두개를 이용하여 추가해주면

얘는 key의 value에 해당하는 부분이 화면에 나타나게 됩니다.

 

About.vue

<template>
  <div>
    <h1>About {{ name }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "subari",
    };
  },
};
</script>

localhost:8080/about

---

2. input

html에서 value에 해당하는 것을 vue에서는 v-model로 사용할 수 있습니다.

data 부분에 input 데이터를 추가하고 v-model 뒤에 ""을 이용하여 추가해주면,

value에 input에 해당하는 값이 들어갑니다.

 

이 때, Vue에서는 data가 2바인딩이기 때문에,

빈 칸의 text를 수정하면  input이라는 변수에는 수정된 값이 저장됩니다.

즉, 단순히 변수를 화면에 보여주는것에서 멈추는 것이 아닌, 변수가 수정되면 값이 업데이트 되는 거죠.

About.vue

<template>
  <div>
    <h1>About {{ name }}</h1>
    <input type="text" v-model="input" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "subari",
      input: "text",
    };
  },
};
</script>

localhost:8080/about

---

3.click 이벤트, 함수 사용

그럼 2바인딩 되는 것을 alert를 통해 확인해보겠습니다.

 

html에서 click은 @click으로 사용할 수 있습니다.

@click 뒤에는 함수 이름이 오면 됩니다.

export default 내부에 methods 를 정의해줍니다.

method 내부에 원하는 함수를 적어주면 사용할 수 있습니다.

주의할 점은 함수에서 data부분을 사용할 때 그냥 변수이름만 적으면 안되고 this.변수 로 사용하면 됩니다.

About.vue

<template>
  <div>
    <h1>About {{ name }}</h1>
    <input type="text" v-model="input" />
    <button type="button" @click="getData">get</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "subari",
      input: "text",
    };
  },
  methods: {
    getData() {
      alert(this.input);
    },
  },
};
</script>

localhost:8080/about

alert

input 칸 안에 text를 hi로 바꾸고 버튼을 클릭하면 바뀐 값이 나옵니다.

즉 2 바인딩으로 인해 현재 input 변수의 값은 "hi"가 되는거죠.

 

 

이번에는 버튼 클릭 시 특정 값으로 변수를 바꿔보겠습니다.

About.vue

<template>
  <div>
    <h1>About {{ name }}</h1>
    <input type="text" v-model="input" />
    <button type="button" @click="getData">get</button>
    <button type="button" @click="setData">set</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "subari",
      input: "text",
    };
  },
  methods: {
    getData() {
      alert(this.input);
    },
    setData() {
      this.input = "data";
    },
  },
};
</script>

set버튼과 setData함수를 추가해주었습니다.

set버튼을 클릭하면 input칸이 'data'로 바뀌는것을 볼 수 있습니다