Vue state 변화시키기 + (v-on/v-model/event)

v-on / @

• v-on 속성은 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용한다.
• v-on을 이용해 이벤트 리스너의 역할을 하거나 short hand인 @를 이용해 이벤트 리스너의 역할을 할 수 있다.

<button @click="alertOne">ALERT ONE!</button>

• 아래처럼 사용하면 click 이벤트를 사용하겠다는 의미이다!

<template>
  <button v-on:click="alertOne">ALERT ONE!</button>
</template>

<script>
export default {
  methods: {
    alertOne() {
      alert(1);
    },
  },
};
</script>

• v-on 대신 간편하게 @를 붙여서 이벤트 리스너의 역할을 하게할 수도 있다!

<template>
  <button @click="alertOne">ALERT ONE!</button>
</template>

<script>
export default {
  methods: {
    alertOne() {
      alert(1);
    },
  },
};
</script>

 

click으로 state 변화시키기 (@click)

• 위에서 본 v-on과 method를 이용해 state를 변경시킬 수 있다.
• 아래 예제에서 버튼을 클릭하면 number라는 state 값이 1이 증가하고 즉시 화면에 반영된다!

<template>
  <div>number is: {{ number }}</div>
  <button @click="add_one">number = number + 1</button>
</template>

<script>
export default {
  data() {
    return {
      number: 0,
    };
  },
  methods: {
    add_one() {
      this.number += 1;
    },
  },
  name: "App",
};
</script>

input으로 state 변화시키기(@input, @change)

@input vs @change

• @input과 @change의 차이는 우리가 이미 알고 있는 input 이벤트와 change 이벤트의 차이이다. input 이벤트는 input의 값이 변경될 때마다 이벤트 리스너가 작동하지만 change 이벤트는 input에서 포커스가 벗어낫을 때(ex: 엔터를 칠 경우)에만 이벤트 리스너가 작동한다!

++중요!!

• 아래처럼 inline으로 v-on에 이벤트를 직접 넣을 수 있고

<template>
  <div>this is state: {{ state }}</div>
  <span>state input : </span
  ><input :value="state" @input="(e) => (state = e.target.value)" />
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      state: "",
    };
  },
};
</script>

• inline으로 $event 키워드를 사용할 수도 있고

<template>
  <div>this is state: {{ state }}</div>
  <span>state input : </span
  ><input :value="state" @input="state = $event.target.value" />
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      state: "",
    };
  },
};
</script>

• 메서드를 따로 선언해서 이벤트 리스너를 설정할 수 있다!

<template>
  <div>this is state: {{ state }}</div>
  <span>state input : </span><input :value="state" @input="setState" />
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      state: "",
    };
  },
  methods: {
    setState(e) {
      this.state = e.target.value;
    },
  },
};
</script>

 

++참고사항

• v-bind로 input에 상태 값을 바인딩하는 이유는 만약 버튼으로 상태를 변경시킨다면 input에는 변경된 상태가 적용되지 않기 때문이다
• 생각해보면 아~~ 하고 할거에여

 

input으로 state 변화시키기(v-model)

• v-model 어트리뷰트는 v-bind와 v-on의 조합으로 동작한다.
• v-model이라는 속성을 사용하면 입력 값이 자동으로 뷰 데이터 속성에 연결된다.
  
  • two-way-binding: vue에서 html 엘리먼트에서 two-way binding은 JS의 데이터와 HTML이 동기화 되는 것을 의미한다
    • 컴포넌트에선 다르다!! 
• v-model은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 “syntax sugar”이다!
  
  • syntax sugar: 읽는 사람 또는 작성하는 사람이 편하게 디자인 된 문법이라는 뜻
• 따라서 매우 편하다
• 아래처럼 v-on과 v-bind를 이용한 표현을

<input :value="state" @input="(e) => (state = e.target.value)" />

• 아래처럼 쉽게 표현할 수 있다!

<input v-model="state" />