λ·° λ©”μ„œλ“œ

뷰의 λ©”μ„œλ“œλŠ” νŠΉμ • κΈ°λŠ₯ λ³„λ‘œ 묢을 수 μžˆλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ ν•¨μˆ˜λ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€. λ©”μ„œλ“œλŠ” ν”νžˆ λ·° ν…œν”Œλ¦Ώμ˜ λ²„νŠΌ 이벀트 μ²˜λ¦¬λΆ€ν„° HTTP ν†΅μ‹ κΉŒμ§€ λ‹€μ–‘ν•œ μ„±κ²©μ˜ μ½”λ“œλ‘œ κ΅¬μ„±λ©λ‹ˆλ‹€.

λ©”μ„œλ“œ μ½”λ“œ ν˜•μ‹

λ©”μ„œλ“œλ₯Ό μ„ μ–Έν•˜λŠ” 방법은 μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

new Vue({
  methods: {
    // ..
  }
})

λ©”μ„œλ“œ μ˜ˆμ‹œ 1 - κΈ°λ³Έ

λ©”μ„œλ“œλ₯Ό μ΄μš©ν•΄μ„œ λ²„νŠΌ 클릭 이벀트λ₯Ό μ²˜λ¦¬ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

<button v-bind:click="clickButton">click me</button>
new Vue({
  methods: {
    clickButton() {
      alert('clicked');
    }
  }
})

μœ„μ˜ click me λ²„νŠΌμ„ ν΄λ¦­ν•˜λ©΄ 경고창이 λœ¨λ©΄μ„œ clicked λΌλŠ” λ©”μ‹œμ§€κ°€ ν‘œμ‹œλ©λ‹ˆλ‹€.

λ©”μ„œλ“œ μ˜ˆμ‹œ 2 - μ‘μš©

λ©”μ„œλ“œμ˜ λ‚΄μš©μ—λŠ” λ‹¨μˆœνžˆ ν™”λ©΄ μ‘°μž‘μ„ μœ„ν•œ κΈ°λŠ₯ 뿐만 μ•„λ‹ˆλΌ νŠΉμ • λ‘œμ§μ„ λ‹΄μ•„λ†“λŠ” μž₯μ†Œλ‘œλ„ ν™œμš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

<button v-bind:click="displayProducts">Refresh</button>

μœ„μ²˜λŸΌ Refresh λΌλŠ” λ²„νŠΌμ„ ν•˜λ‚˜ λ§Œλ“€κ³  클릭 ν–ˆμ„ λ•Œ displayProducts() λ©”μ„œλ“œκ°€ μˆ˜ν–‰λ  수 있게 λ””λ ‰ν‹°λΈŒλ‘œ μ—°κ²°ν•©λ‹ˆλ‹€.

new Vue({
  data: {
    products: []
  },
  methods: {
    displayProducts() {
      this.fetchData();
      // ..
    },
    fetchData() {
      axios.get('/products').then(function(response) {
        this.products = response.data;
      }).catch(function(error) {
        alert(error);
      });
    }
  }
})

Refresh λ²„νŠΌμ„ ν΄λ¦­ν•˜κ³  λ‚˜λ©΄ displayProducts() λ©”μ„œλ“œκ°€ fetchData()λ₯Ό ν˜ΈμΆœν•©λ‹ˆλ‹€. 이런 μ‹μœΌλ‘œ λ©”μ„œλ“œλ₯Ό μ—°κ²°ν•΄μ„œ μ‚¬μš©ν•  μˆ˜λ„ 있으며 μ΄λ ‡κ²Œ ν•˜λ©΄ νŠΉμ • κΈ°λŠ₯ λ³„λ‘œ λ©”μ„œλ“œλ₯Ό 뢄리할 수 μžˆμ–΄ μ½”λ“œλ₯Ό μ€‘λ³΅ν•΄μ„œ μž‘μ„±ν•˜μ§€ μ•Šκ³  μž¬ν™œμš©ν•˜κΈ°κ°€ μˆ˜μ›”ν•©λ‹ˆλ‹€.