Vue와 DOM 상호작용

1. v-on

vue에서는 v-on디렉티브를 통해 사용자 이벤트를 수신받습니다.

버튼을 클릭하면 화면에 출력된 count값이 증가하거나 감소합니다. 이렇게 vue에서는 EventListeners를 원하는 위치를 선언하기만 하면 사용자의 이벤트를 수신할 수 있습니다.

이것이 바로 vue의 장점으로 vue는 반응성을 내장하고, 데이터가 변경되는 것을 감지하며, EventListeners의 장소를 찾습니다.

2. 이벤트 코드 작성하기

1번에서는 html에 너무 많은 로직이 포함되어 있었습니다. 이는 최적의 방법이 아닙니다.

HTML은 실제로 데이터를 출력하는 곳으로 단순한 로직이더라도 Javascript코드를 script로 이동시키는 것이 좋습니다.

3. 이벤트 인수로 작업하기

<button @click="add(10)">Add 10</button>
<button @click="reduce(5)">Subtract 5</button>
<p>Result: {{ counter }}</p>

  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    add(num) {
      this.counter = this.counter + num;
    },
    reduce(num) {
      this.counter = this.counter - num;
    }
  },

4. 네이티브 이벤트 객체 사용하기

case1

      <input @input="addName" />
      <p>Your Name : {{name}}</p>

  data() {
    return {
      name: ''
    };
  },
  methods: {
    addName(event) {
      this.name = event.target.value
    }
  }, 

실제로 콘솔창을 열어두고 input에 입력값을 넣으면 해당하는 p태그만 깜박거리며 입력값이 반영되는 것을 확인할 수 있습니다. 즉, 변경이 일어나는 부분만 현재 리렌더링이 되고 있습니다.

이것이 바로 vue의 반응성입니다. 이를 통해 성능을 절약할 수 있습니다.

case2: $event

<input @input="addName($event, 'roh')" />
<p>Your Name : {{name}}</p>

  methods: {
    addName(event, lastName) {
      this.name = event.target.value + ' ' + lastName
    }
  },

어떤한 인수값과 함께 내장된 이벤트를 전달해야하는 경우 $event를 통해 액세스 할 수 있습니다.

5. 이벤트 수식어

뷰공식문서

이벤트 수정자는 vue에 내장된 또 다른 유용한 기능입니다. 예시를 통해 살펴보도록 하겠습니다.

  <form>
    <input type="text">
      <button>Sign UP</button>
  </form>

버튼이 있는 form양식의 경우 해당 양식을 제출하는 기본 이벤트가 내장되어 있기 떄문에 sign up버튼을 누르면 새로고침이 발생하게 됩니다. 앱이 제공하는 서버에 HTTP요청을 보내는 것입니다. 하지만 우리는 로컬에서 실행하고 있기 때문에 필요 없습니다.

따라서 이러한 브라우저의 기본값을 방지하고 대신 수동으로 처리할 수 있도록 코드를 작성해보도록 하겠습니다.
(브라우저 기본값을 방지하고 대신 Vue 앱의 Vue를 사용하여 JavaScript에서 수동으로 처리하고 거기에서 사용자 입력을 읽고 유효성을 검사한 다음 백엔드 서버에 수동으로 보내고 데이터베이스에 저장합니다. )

자바스크립트의 기본 이벤트 방지

<form>
  <input type="text"  @submit="submitForm" />
  <button>Sign UP</button>
</form>

  methods: {
    submitForm(event) {
      evnet.preventDefault();
      alert('submited!!!')
    }
  }

evnet.preventDefault();는 vue없이 바닐라 자바스크립트으로도 가능한 기본값을 방지하는 이벤트 호출입니다.

vue를 이용한 방법(이벤트 수식어)

<form>
  <input type="text"  @submit.prevent="submitForm" />
  <button>Sign UP</button>
</form>

submitForm() {
  alert('submited!!!')
}

💡이벤트수식어
.stop
.prevent
.capture
.self
.once
.passive

6. v-once

<button @click="add(10)">Add 10</button>
<button @click="reduce(5)">Subtract 5</button>
<p v-once>Starting Counter: {{counter}}</p>
<p>Result: {{ counter }}</p>