Muscardinus

Method 사용 본문

FrontEnd/Vue

Method 사용

Muscardinus 2021. 12. 28. 01:47
728x90

Vue template 안에서 복잡한 계산을 하는것은 장려되지 않는다.

그렇다면, data를 가공해서 보여지기 위해서는 어떻게 해야할 것인가?

 

이를 위해서 vue에서는 method라는 기능을 제공한다.

 

const vm = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    };
  },
  methods: {
    fullName() {
      return `${this.firstName} ${this.lastName.toUpperCase()}`;
    },
  },
}).mount('#app');

arrow function에 익숙한 사람들은 충동적으로 arrow function을 사용하겠지만,

this를 사용하기 위해서는 일반함수 선언방식을 사용해야한다.

(this를 사용하지 않을 경우, arrow function을 사용해도 무방하다)

 

template에서 method를 사용하는 방법은 단순하다.

<!DOCTYPE html>
<html>
  <head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <div id="app">{{ fullName() }}</div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
  </body>
</html>
728x90

'FrontEnd > Vue' 카테고리의 다른 글

v-bind  (0) 2021.12.28
v-model  (0) 2021.12.28
v-cloak  (0) 2021.12.28
data 받기  (0) 2021.12.17
Vue 실행  (0) 2021.12.17
'FrontEnd/Vue' Related Articles more
Comments