Study Note

methods

정의

methods {
   add(num) {
      this.num += num;
   }
}

사용

<button v-on:click="add(10)"> add 10 </button>

• 템플릿에서 데이터를 바인딩할 때 사용한다.
• data binding, event binding
• 컴포넌트의 렌더링 주기에 맞춰 매번 수행된다.
• 따라서, event binding에서는 methods를 주로 사용한다.

computed

정의

computed: {
   number() {
      return this.num + 10;
   }
}

사용

<div>Added Number : {{ number }}</div>

• data binding에만 사용된다.
• event binding에는 사용되지 않는다.
• 다른 데이터를 기반으로 하는 데이터를 가져오기 유용하다.
• 의존하는 데이터가 변경될 때만 재실행되거나 재평가된다.
  (다른 데이터가 변경될 때는 재평가 되지 않는다)
• 따러서, 다른 데이터에 의존하는 데이터에 주로 사용한다.
• 연산을 하는 함수이지만, 결과를 데이터처럼 사용할 것이기 때문에,
  이름을 addNumber() 라고 짓지 않고, data를 다루듯이 number() 라고 하였다.

watch

정의

watch: {
   number(newValue, oldValue)	{
      this.number = newValue + 10;
   }
},
data() {
  return {
     number: 0
  }
}

사용

<div>Added Number : {{ number }}</div>

• 템플릿에 직접 사용하지 않는다.
• 템플릿 내부에서 참조하지 않지만, data, computed property를 포함한 어느 property든 감시할 수 있다.
• 데이터 변경에 대한 반응(reaction)을 코드로 실행할 수 있다.
• ex) http request, timer 설정, local storage에 데이터 저장
• 주로, 데이터가 아닌 업데이트에 watch를 사용
  (바뀌는 데이터를 토대로, 데이터가 아닌 내부에서 업데이트하는 작업이 있는 경우 사용)
• 바뀌기 전의 값과 갱신후의 값을 파라미터로 받을 수 있다.

[참조]

• Udemy
  Vue - 완벽 가이드 (Router 및 Composition API 포함)
  https://www.udemy.com/share/107reM/

v-model (양방향 바인딩)

자동으로 input의 value로 입력된 값이

Vuejs의 data와 바인딩 된다.

입력 이벤트가 발생하면, 입력된 값을 Vuejs의 data의 name 속성에 바인딩하고,

이를 통해 Vuejs의 data의 name 속성 값이 바뀌면, 그 값이 input의 value에 바인딩된다.

양방향으로 통신하기 때문에, 양방향 바인딩이라고 한다.

<input type='text'
    v-model='name'>

아래의 코드와 동일하다고 보면 된다.

<input type='button'
    v-bind:value='name'
    v-on:input='setName' />

v-model을 사용하면, 

• 위 코드에서 사용되는 setName()  메소드는 작성하지 않아도 된다.
• data에 'name' 속성은 필요하다.

form의 기본적인 동작은 서버로 보내는 것이다.

그러면서, 화면의 데이터가 리셋되게 된다.

submit.prevent는 이런 form의 기본 동작이 되지 않도록 제어한다.

form의 기본적인 동작

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <form>
      <input type='text'>
      <button> 클릭하세요 </button>
    </form>
  </div>
</template>

<script>
export default {
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}
</style>

버튼을 클릭하면, form의 기본적인 동작이 실행된다.

submit.prevent

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <form v-on:submit.prevent='btnClick'>
      <input type='text'>
      <button> 클릭하세요 </button>
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    btnClick() {
      alert('hello!')
    }
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}
</style>

v-on:submit.prevent

form의 기본적인 동작이 수행되지 않고,

지정한 메서드가 실행된다.

Javascript에서의 event.preventDefault()와 같은 효과가 있다.