Develop/VUE.JS 2

Vue js 2 methods

codeGray 2021. 12. 25. 15:34
반응형

Vue js 메소드는 아래와 같이 선언하여 사용 할 수 있습니다.

<template>
  <div>
    {{ hello() }}
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      name : 'codeGray',
    }
  },
  methods : {
  //method 선언
  //method 안에서 data변수에 접근하려면 this를 붙여줘야 합니다.
  //vue가 로딩 될 때, data = this에 매핑 됩니다.
    hello(){
      return '안녕하세요 ' + this.name + ' 입니다.';
    }
  }
  
  
}
</script>

 

methods 라는 객체를 만들어서 그 안에 함수를 정의 하시면 됩니다.

 

methods 안에서 data 변수에 접근하기 위해서는 this 를 붙여주어야 합니다.

 

methods 도 변수와 마찬가지로 {{ methods() }} 안에 바인딩 됩니다. 

 

 

반응형

'Develop > VUE.JS 2' 카테고리의 다른 글

Vue js 2 Event  (0) 2021.12.28
Vue js 2 v-if , v-for  (0) 2021.12.25
Vue js 2 v-bind  (0) 2021.12.25
Vue js 2 Data  (0) 2021.12.22
Vue js 설치 ( vue2, vue3 )  (0) 2021.12.20