Vue:함수

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동

틀:Vue

  1. Vue:개요
    1. Vue:설치 및 개발환경 세팅
    2. Vue:프로젝트 생성 및 시작해보기
  2. Vue:문법
    1. Vue:데이터바인딩
    2. Vue:반복문
    3. Vue:조건문
    4. Vue:함수
  3. Vue:이벤트
    1. Vue:이벤트 핸들러

개요[편집 | 원본 편집]

특정 명령을 재사용하거나, 너무 긴 코드를 다른 곳에 정리해두고 싶을 때 사용하는 기능.

의도 코드 설명
코드를 정리하기 위해 함수 사용
<a @click="함수이름">버튼 {{ 변화 }}</a>


<script>
export default {
    name : 'App',
    data() {
        return {
            데이터 :1,
            데이터2 : 2,
            데이터3 : ['등', '등등']
        }
    },
    methods : {  // 함수를 작성할 공간을 정의하는 옵션.
        함수이름() {
            함수내용.
            this.데이터;  // 데이터를 사용하기 위해선 this 안으로 접근해야 한다.
        },
        함수2() {
            함수내용.
        }
    },
    mounted() {
    // 함수는 라이프사이클 어디에서든 불려와져야 한다.
    this.함수이름()
    this.함수2()
  }
}
    
</script>