Vue_8 메서드

---

메서드

이름 그대로 Vue 인스턴스의 메서드를 말함

Vue 인스턴스의 생성자 옵션 객체에서 method 프로퍼티로 정의함

methods는 데이터 수정 및 서버에 HTTP 요청을 보낼 때 사용함

 

method: {
	메서드명: function() {
		// 처리
	}
}

 

정의된 메서드는 Vue 인스턴스의 메서드로 호출할 수 있음

 

v-on 디렉티브의 속성값에 바인딩하고 뷰에서 이벤트가 발생했을 때 호출되는 형태로 사용하는 것이 가장 흔함. 

템플릿에서도 {{메서드명}}과 같은 형태로 텍스트 전개에 사용할 수 있음

 

 

예) 버튼을 클릭했을 때, 입력한 값을 서버로 전송하는 상황.

<button v-bind:disabled="!canBuy" v-on:click"duBuy">구매</button>

 

---

 

1. 메서드와 computed의 차이:

• methods는 호출할 때마다 항상 실행되고, 값을 캐싱하지 않음. 반면, computed는 의존성에 따라 값이 변경될 때만 재계산되고 캐싱됨. 따라서, 복잡한 연산이 필요 없는 경우에 methods를 주로 사용함.

2.메서드의 this:

• Vue 인스턴스 내에서 정의된 methods는 **Vue 인스턴스를 가리키는 this**에 접근할 수 있음. 이를 통해 데이터 속성, 다른 메서드, 반응형 데이터에 접근하고 이를 조작할 수 있음.

3. 비동기 작업:

• 서버에 HTTP 요청을 보낼 때 주로 메서드를 사용함. axios 같은 라이브러리를 사용하여 메서드 내에서 API 호출을 처리하고, 결과를 반응형 데이터에 저장할 수 있음.

---

 

1. 메서드의 정의 및 사용

<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse Message</button>
</div>

 

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

 

• reverseMessage라는 메서드를 정의함.
• 버튼을 클릭하면 @click 디렉티브를 통해 reverseMessage 메서드가 호출되고, message 데이터가 뒤집힘.
• this.message를 통해 Vue 인스턴스의 데이터를 조작함.

 

 

2. 서버 요청과 메서드

<div id="app">
  <p>{{ userData }}</p>
  <button @click="fetchUserData">Get User Data</button>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      userData: 'No data yet'
    };
  },
  methods: {
    fetchUserData() {
      // 가상의 API 호출
      fetch('https://jsonplaceholder.typicode.com/users/1')
        .then(response => response.json())
        .then(data => {
          this.userData = data.name; // API에서 받은 데이터를 반응형 데이터에 저장
        })
        .catch(error => {
          console.error('Error fetching user data:', error);
        });
    }
  }
});

 

• fetchUserData라는 메서드에서 API 호출을 수행.
• 버튼을 클릭하면 API에서 데이터를 가져와 userData에 저장하고, 그 결과가 화면에 표시됨.
• 비동기 작업이 완료되면 결과 데이터를 반응형 데이터로 업데이트함.

 

 

3. 템플릿에서 메서드 사용 

<div id="app">
  <p>Original message: {{ message }}</p>
  <p>Uppercase message: {{ toUpperCaseMessage() }}</p>
</div>

 

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    toUpperCaseMessage() {
      return this.message.toUpperCase();
    }
  }
});

• • 템플릿에서 toUpperCaseMessage 메서드를 직접 호출하여 원본 메시지를 대문자로 변환한 결과를 보여줌.
  • 메서드를 템플릿에서 호출할 때마다 항상 실행되며, 캐싱되지 않음.